在页面的指定位置实现的图片自动的左右轮流切换展示效果，当点击图片左下的标签(或中间的小圆点)切换到对应的图片。接下来通过本文给大家分享用jquery实现圆点图片轮播效果实例代码，需要的朋友参考下，希望能帮助到大家。
图片轮播效果 :
在页面的指定位置实现的图片自动的左右轮流切换展示,效果为无缝连接;
点击图片左下的标签(或中间的小圆点)切换到对应的图片;
点击图片的左右切换标签;
整体思路 :
--------------------------------------------------------------------------------
响应式黑色展台设计整站模板，自带内核安装即用，图片文本实现可视化，方便修改，支持多种内容模型及自定义功能，可根据需要自行添加。模板特点： 1、安装即用，自带人人站CMS内核及企业站展示功能（产品，新闻，案例展示等），并可根据需要增加表单 搜索等功能（自带模板） 2、支持响应式 3、前端banner轮播图文本均已进行可视化配置 4、伪静态页面生成 5、支持内容模型、多语言、自定义表单、筛选、多条件搜
自动轮播: 将一个用于放置图片素材的与显示框同高度的大p放入显示框,将图片素材放入大的p中,通过jquery的animate()方法改变大p相对于显示框绝对位置的left值及变化时间实现图片的滑动;使用setInterval()方法设置定时器,达到自动播放效果;无缝连续播放的重点在于,第一张图片与最后一张图片要相同,这样播放完最后一张图片后将大p框的left设定为初始值,再将与图片索引相同的变量设定为1(第二张),这样就能达到无缝连续滑动效果;
--------------------------------------------------------------------------------
点击标签切换到对应图片: 对点击切换图片的li标签添加鼠标点击事件,若存在定时器的先清除,使用$(this).Index()获取当前点击图片的序号(索引),将大p的left值设置为当前图片位置的值,同时别忘了将当前li标签设置深颜色的明显效果,其他li标签设置初始效果;在事件中设置倒计时,当鼠标点击后一段时间不进行其他操作,则恢复自动播放的定时器;
--------------------------------------------------------------------------------
点击向左向右标签切换到上/下一张图片: 该标签使用标签达到效果更好(防止连续点击时产生选中页面变蓝的现象),先获取点击时图片的编号,此时不能使用$(this).Index(),因为此时this指代的对象为左右切换标签,而不是图片对象,还记得上面那个与图片索引相同的变量吗?我们需要一开始就设定它为全局变量(我将它起名为rcd),它的值相当于是和图片,li标签一起绑定的,在还没有点击向左向右标签时,图片是在轮播的,rcd变量中存着当前图片的序号,因此,尽管用不了this,我们可以用rcd+1/-1找到向右滑/向左划的图片编号,有了编号,就可以知道大p需要运动到的位置,和设置左下方的标签显示状态了.当rcd-1==-1时,将p的位置设置为最后一张图片显示的位置,然后将rcd设置为倒数第二张图片对应的编号;当rcd+1比最后一张还多一时,将p的位置设置为第一张图片显示的位置,将rcd设置为第二张图片对应的编号即可.
--------------------------------------------------------------------------------
代码实现如下 :
//引入jquery (css代码未贴)
@@##@@
@@##@@
@@##@@
@@##@@
- iPhone6
- Mate9
- vivo X9
大家学会了吗？赶紧动手尝试一下吧。
相关推荐：
