jQuery实现焦点图自动切换

jQuery实现焦点图自动切换

1. 页面布局结构图：



其中按钮切换区的按钮预定义了与图片基色调相同的颜色：



2. 获取按钮切换区的li标签，并定义鼠标划过事件：（index为全局变量）



将鼠标划过的当前li标签（按钮区域），给当前按钮加上class属性selected

siblings()函数是找到当前li元素的所有同辈标签（即其他所有的按钮），并移除其class属性。

3. 保存当前鼠标划过的按钮下标： index = $(this).index();



实现图片联动切换效果：

$(“#banner_imgs”).find(“li”).eq(index).fadeIn().siblings().hide();

找到对应图片，让其渐入显示，同时找到其他同辈元素使其隐藏

背景颜色联动切换：

获取对应按钮标签的预定义颜色，并将其赋给背景切换块。

$(this).data(“color”) 获取按钮区li标签的预定义颜色。

4. 点击下一页按钮切换



index为全局变量，在按钮区鼠标划过事件中有一个当前的index变量。

当下一页点击切换到最后一张图片的时候，再次点击，切换到第一张

实现图片联动的原理与上面相同

5. 背景联动和按钮联动



找到对应按钮区的预定义颜色，将其赋给整个banner背景区

按钮联动：对应按钮添加class属性，同时去除其同辈所有元素的class属性。

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

7. 自动切换： setInterval()函数实现

过程与上一页下一页点击事件原理相同。



效果预览：