用jquery写轮播图

本文介绍了如何使用jQuery创建一个轮播图,包括定义图片数量、自动轮播、鼠标悬停效果、左右按钮切换、小圆点导航以及事件委托等关键步骤。

 

1.定义count变量 图片的张数     定义变量index=1图片的下标   获取小圆点

2.自动轮播  setinterval定时器   定时3秒后图片自动切换   nextpage()切换到下一张

3.鼠标移入是左右切换的按钮显现 且自动轮播停止   鼠标移出是左右切换按钮隐藏  自动轮播继续

4.点击左按钮时图片切换到下一张   点击右按钮时图片切换到上一张 

 

5.获取小圆点集合数组的长度    对小圆点进行循环遍历绑定   删除第一个小圆点的class属性

6.判断  获取小圆点的index属性如果==1  让下标index=5 否则下标-1

7.事件委托   定义变量其实移动为0   删除第一个小圆点的class属性   进行双重判断

8.为移动的距离添加单位

 

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值