Question

jquery怎样实现焦点图

Answer 1

1. 编写页面结构，其中按钮切换区的按钮预定义了与图片基色调相同的颜色：

2. 获取按钮切换区的li标签，并定义鼠标划过事件：（index为全局变量），将鼠标划过的当前li标签（按钮区域），给当前按钮加上class属性selected，siblings()函数是找到当前li元素的所有同辈标签（即其他所有的按钮），并移除其class属性。保存当前鼠标划过的按钮下标： index = $(this).index();

3. 实现图片联动切换效果：$(“#banner_imgs”).find(“li”).eq(index).fadeIn().siblings().hide();找到对应图片，让其渐入显示，同时找到其他同辈元素使其隐藏

   背景颜色联动切换：获取对应按钮标签的预定义颜色，并将其赋给背景切换块。$(this).data(“color”)   获取按钮区li标签的预定义颜色。

4. 点击下一页按钮切换，index为全局变量，在按钮区鼠标划过事件中有一个当前的index变量。当下一页点击切换到最后一张图片的时候，再次点击，切换到第一张实现图片联动的原理与上面相同

5. 背景联动和按钮联动，找到对应按钮区的预定义颜色，将其赋给整个banner背景区，按钮联动：对应按钮添加class属性，同时去除其同辈所有元素的class属性。

6. 上一页切换原理与下一页切换相同

7. 自动切换： setInterval()函数实现，过程与上一页下一页点击事件原理相同。