用jQuery实现圆点图片轮播效果


Posted in Javascript onMarch 19, 2017

图片轮播效果 :

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

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

用jQuery实现圆点图片轮播效果

用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>
      <ul>
        <li style="opacity: 0.6;">iPhone6</li>
        <li>Mate9</li>
        <li>vivo X9</li>
      </ul>
      <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="lt"><img src="轮播图/left.png"/></a> //阻止浏览器的默认跳转
      <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="rt"><img src="轮播图/right.png"/></a>
    </div>
  </body>

也可以在我的Github上克隆这个效果的完整代码: https://github.com/Getthrough/Image-Carousel

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

Javascript 相关文章推荐
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 Javascript
javascript的 {} 语句块详解
Feb 27 Javascript
整理一下常见的IE错误
Nov 18 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
Dec 19 Javascript
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
Jul 24 Javascript
在vue中嵌入外部网站的实现
Nov 13 Javascript
Bootstrap 网格系统布局详解
Mar 19 #Javascript
用JavaScript和jQuery实现瀑布流
Mar 19 #Javascript
JSONP基础知识详解
Mar 19 #Javascript
jQuery中table数据的值拷贝和拆分
Mar 19 #Javascript
js实现旋转木马效果
Mar 17 #Javascript
jQuery实现验证码功能
Mar 17 #Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
Mar 17 #Javascript
You might like
实用函数2
2007/11/08 PHP
PHP实现Socket服务器的代码
2008/04/03 PHP
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
php图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
php常见的魔术方法详解
2014/12/25 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
js自动闭合html标签(自动补全html标记)
2012/10/04 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
JS给按钮添加跳转功能类似a标签
2017/05/30 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
JS实现简单的星期格式转换功能示例
2018/07/23 Javascript
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
python下载微信公众号相关文章
2019/02/26 Python
Python生态圈图像格式转换问题(推荐)
2019/12/02 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
Volcom英国官方商店:美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
MYSQL相比于其他数据库有哪些特点
2013/07/19 面试题
战略性融资合作协议书范本
2014/10/17 职场文书
计划生育工作汇报
2014/10/28 职场文书
2014年专项整治工作总结
2014/11/17 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书
总经理致辞
2015/07/29 职场文书
使用JS实现简易计算器
2021/06/14 Javascript
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技
服务器nginx权限被拒绝解决案例
2022/09/23 Servers