团购微信小程序案例_用jQuery完成圆点图片轮播效果

  • 栏目:公司新闻 时间:2021-01-12 12:52 分享新闻到:
<返回列表

用jQuery实现圆点图片轮播效果       在页面的指定位置实现的图片自动的左右轮流切换展示效果,当点击图片左下的标签(或中间的小圆点)切换到对应的图片。接下来通过本文给大家分享用jQuery实现圆点图片轮播效果实例代码,需要的朋友参考下

图片轮播效果 :

在页面的指定位置实现的图片自动的左右轮流切换展示,效果为无缝连接;

点击图片左下的标签(或中间的小圆点)切换到对应的图片;

点击图片的左右切换标签;

 

整体思路 :

--------------------------------------------------------------------------------

自动轮播: 将一个用于放置图片素材的与显示框同高度的大div放入显示框,将图片素材放入大的div中,通过jquery的animate()方法改变大div相对于显示框绝对位置的left值及变化时间实现图片的滑动;使用setInterval()方法设置定时器,达到自动播放效果;无缝连续播放的重点在于,第一张图片与最后一张图片要相同,这样播放完最后一张图片后将大div框的left设定为初始值,再将与图片索引相同的变量设定为1(第二张),这样就能达到无缝连续滑动效果;

--------------------------------------------------------------------------------

点击标签切换到对应图片: 对点击切换图片的li标签添加鼠标点击事件,若存在定时器的先清除,使用$(this).Index()获取当前点击图片的序号(索引),将大div的left值设置为当前图片位置的值,同时别忘了将当前li标签设置深颜色的明显效果,其他li标签设置初始效果;在事件中设置倒计时,当鼠标点击后一段时间不进行其他操作,则恢复自动播放的定时器;

--------------------------------------------------------------------------------

点击向左向右标签切换到上/下一张图片: 该标签使用 a 标签达到效果更好(防止连续点击时产生选中页面变蓝的现象),先获取点击时图片的编号,此时不能使用$(this).Index(),因为此时this指代的对象为左右切换标签,而不是图片对象,还记得上面那个与图片索引相同的变量吗 我们需要一开始就设定它为全局变量(我将它起名为rcd),它的值相当于是和图片,li标签一起绑定的,在还没有点击向左向右标签时,图片是在轮播的,rcd变量中存着当前图片的序号,因此,尽管用不了this,我们可以用rcd+1/-1找到向右滑/向左划的图片编号,有了编号,就可以知道大div需要运动到的位置,和设置左下方的标签显示状态了.当rcd-1==-1时,将div的位置设置为最后一张图片显示的位置,然后将rcd设置为倒数第二张图片对应的编号;当rcd+1比最后一张还多一时,将div的位置设置为第一张图片显示的位置,将rcd设置为第二张图片对应的编号即可.

--------------------------------------------------------------------------------

代码实现如下 :

 script src="jquery.min.js" type="text/javascript" charset="utf-8" /script //引入jquery (css代码未贴)
 script type="text/javascript" 
 $(function(){
 var rcd=0; //代表图片和li标签编号的全局变量
// 滑动函数
 function slide(){ 
 rcd++;
 if(rcd==4){ //右滑倒最后一张时,将图片设定为第一张的位置,即将滑动的图片设定为第二张(rcd=1)
 $('#sld').css({'left':'0'});
 rcd=1;
 var dis = rcd*(-1210)+'px'; //这里的1210是每张图片的宽度,rcd和dis的关系就是编号和div left值的关系
 $('#sld').stop().animate({'left':dis},1000) //设定left
 if (rcd==3) { //当切换到最后一张时(一共4张图片),将左下方的标签样式也改成与第一张一样的
 $('#fix ul li').eq(0).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'})
 }else{
 $('#fix ul li').eq(rcd).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'}) //不是最后一张那么就正常执行
// 设定定时器,开始轮播
 var timer = setInterval(slide,2000);
 var st; //声明倒计时函数变量名
// 绑定li鼠标点击事件
 $('#fix ul li').click(function(){
 clearInterval(timer); //清除定时器(同下一行)
 clearTimeout(st);
 var rcd = $(this).index(); //获得点击的li的编号
 var dis =rcd*(-1210)+'px'; //获得该编号对应的div的left值
 $('#sld').stop().animate({'left':dis},500) //开始运动
 $('#fix ul li').eq(rcd).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'}) //设置当前li样式,其他li变为初始值
 st = setTimeout(function(){ //设置定时器,若3秒内没有鼠标点击操作,就重新设置轮播定时器
 timer = setInterval(slide,2000);
 },3000)
 }); 
// 左图标点击事件
 $('#fix .lt').click(function(){
 clearInterval(timer);
 clearTimeout(st);
 rcd--; //点击前的编号-1
 if(rcd==-1){ //如果rcd减后值为-1,那么将div的left设置为最后一张图显示的值,并将rcd设置为倒数第二张的编号
 $('#sld').css({'left':'-3630px'});
 rcd=2;
 var dis = rcd*(-1210)+'px';
 $('#sld').stop().animate({'left':dis},1000) //运动
 if (rcd==3) { //与前面相同
 $('#fix ul li').eq(0).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'})
 }else{
 $('#fix ul li').eq(rcd).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'})
 st = setTimeout(function(){
 timer = setInterval(slide,2000);
 },3000)
// 右图标点击事件
 $('#fix .rt').click(function(){
 clearInterval(timer);
 clearTimeout(st);
 slide(); //右图标点击一次与滑动函数一致
 st = setTimeout(function(){
 timer = setInterval(slide,2000);
 },3000)
// 给#fix div加鼠标移入事件
 $('#fix').mouseenter(function(){ 
 $('#fix a').css({'display':'block'}); //鼠标移入时,向左向右图标显示
// 给#fix div加鼠标移出事件
 $('#fix').mouseleave(function(){
 $('#fix a').css({'display':'none'}); //鼠标移出时,向左向右图标隐藏
 /script 
 /head 
 body 
 div id="fix" 
 div id="sld" 
 img src="轮播图/ph1.png"/ 
 img src="轮播图/ph2.jpg"/ 
 img src="轮播图/ph3.jpg"/ 
 img src="轮播图/ph1.png"/ 
 /div 
 li iPhone6 /li 
 li Mate9 /li 
 li vivo X9 /li 
 /ul 
 a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" img src="轮播图/left.png"/ /a //阻止浏览器的默认跳转
 a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" img src="轮播图/right.png"/ /a 
 /div 
 /body 

也可以在我的Github上克隆这个效果的完整代码:

以上所述是小编给大家介绍的用jQuery实现圆点图片轮播效果,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!


分享新闻到:

更多阅读

团购微信小程序案例_用jQuery完成圆点图片

公司新闻 2021-01-12
用jQuery完成圆点照片滚屏实际效果 在网页页面的特定部位完成的照片全自动的上下轮着...
查看全文

小程序开发制作平台_angular学习之ngRoute路

公司新闻 2021-01-12
angular学习培训之ngRoute路由器体制 本文关键详细介绍了angular学习培训之ngRoute路由器体制...
查看全文

微信聊天小程序_解决AngualrJS页面改写导致

公司新闻 2021-01-12
处理AngualrJS网页页面更新造成出现异常显示信息难题 绪 老话说,关键点决策成功与失败...
查看全文
返回全部新闻


区域站点: 南丰县微信h5小游戏   南宫市手机软件制作教程   囊谦县手机网站自助建站   南和县h5小游戏制作平台   南华县微信h5小游戏   南江县手机软件制作教程   南京市手机网站自助建站   南靖县h5小游戏制作平台   南康市微信h5小游戏   南乐县手机软件制作教程   南陵县手机网站自助建站   南宁市h5小游戏制作平台   南平市微信h5小游戏   南皮县手机软件制作教程   南市区手机网站自助建站   南通市h5小游戏制作平台   南投县微信h5小游戏   南雄市手机软件制作教程   南溪县手机网站自助建站   南阳市h5小游戏制作平台   南漳县微信h5小游戏   南召县手机软件制作教程   南郑县手机网站自助建站   那坡县h5小游戏制作平台   那曲县微信h5小游戏   纳雍县手机软件制作教程   讷河市手机网站自助建站   内黄县h5小游戏制作平台   内江市微信h5小游戏   内丘县手机软件制作教程   内乡县手机网站自助建站   嫩江市h5小游戏制作平台   聂荣县微信h5小游戏   尼玛县手机软件制作教程   尼木县手机网站自助建站   宁安市h5小游戏制作平台   宁波市微信h5小游戏   宁城县手机软件制作教程   宁德市手机网站自助建站   宁都县h5小游戏制作平台   宁国市微信h5小游戏   宁海县手机软件制作教程   宁化县手机网站自助建站   宁晋县h5小游戏制作平台   宁陵县微信h5小游戏   宁明县手机软件制作教程   宁南县手机网站自助建站   宁强县h5小游戏制作平台   宁陕县微信h5小游戏   宁武县手机软件制作教程   宁乡市手机网站自助建站   宁阳县h5小游戏制作平台   宁远县微信h5小游戏   农安县手机软件制作教程   磐安县手机网站自助建站   盘锦市h5小游戏制作平台   盘山县微信h5小游戏   磐石市手机软件制作教程   盘州市手机网站自助建站   蓬安县h5小游戏制作平台   澎湖县微信h5小游戏   蓬莱市手机软件制作教程   彭山县手机网站自助建站   蓬溪县h5小游戏制作平台   彭阳县微信h5小游戏   彭泽县手机软件制作教程   彭州市手机网站自助建站   偏关县h5小游戏制作平台   平安县微信h5小游戏   平昌县手机软件制作教程   平定县手机网站自助建站   屏东县h5小游戏制作平台   平度市微信h5小游戏   平果县手机软件制作教程   平和县手机网站自助建站   平湖市h5小游戏制作平台   平江县微信h5小游戏   平乐县手机软件制作教程   平凉市手机网站自助建站   平利县h5小游戏制作平台   平罗县微信h5小游戏   平陆县手机软件制作教程   屏南县手机网站自助建站   平泉市h5小游戏制作平台   屏山县微信h5小游戏   平顺县手机软件制作教程   平塘县手机网站自助建站   平潭县h5小游戏制作平台   平武县微信h5小游戏   萍乡市手机软件制作教程   平乡县手机网站自助建站   平阳县h5小游戏制作平台   平遥县微信h5小游戏   平阴县手机软件制作教程   平邑县手机网站自助建站   平远县h5小游戏制作平台   平舆县微信h5小游戏   皮山县手机软件制作教程   普安县手机网站自助建站   浦北县h5小游戏制作平台   浦城县微信h5小游戏   普洱市手机软件制作教程   普格县手机网站自助建站   浦江县h5小游戏制作平台   普兰县微信h5小游戏   普宁市手机软件制作教程   莆田市手机网站自助建站   迁安市h5小游戏制作平台   乾安县微信h5小游戏   潜江市手机软件制作教程   潜山市手机网站自助建站  

友情链接: 免费建站的平台 网页设计自我介绍 自助建站 搭建网站基本步骤 手机版

Copyright © 2002-2020 手机网站自助建站_h5小游戏制作平台_微信h5小游戏_手机软件制作教程_抽奖h5 版权所有 (网站地图) 备案号:粤ICP备10235580号