平时,在上网的时候经常看到有这样的特效。今日小编就带大家来制作这种效果
其实这种效果还是很容易制作的,首先,我们来分析一下原理,当鼠标点击左侧的li的时候,右侧的图片自动切换。
1:获取li下面img标签的大图片地址
var img=$(this).find("img").attr("data-img")
2:高亮显示当前的li,先要清除掉所有的高亮
$(".list li").removeClass("on")//移除所有的特效
$(this).addClass("on")//给当前li添加一个特有高亮效果
手动触发效果代码:
自动触发代码:
自动触发就是定时,让程序自动点击运行
1:获取li下面所有图片的个数
2:设置间隔的时间,毫秒
3:我们设置一个变量i,i的最大值等于图片个数,如果超过图片的个数,直接从0开始。
4:设置一个定时器,3秒自动执行操作