jquery特效001焦点图

平时,在上网的时候经常看到有这样的特效。今日小编就带大家来制作这种效果

演示地址:http://362.tkv5.cn/001

其实这种效果还是很容易制作的,首先,我们来分析一下原理,当鼠标点击左侧的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秒自动执行操作

源码下载:http://zhi.tkv5.cn/goods/index/id/725.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值