用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 控制小数位数的实现代码
Aug 02 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
js中document.write的那点事
Dec 12 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
Windows系统下Node.js的简单入门教程
Jun 23 Javascript
javascript中return,return true,return false三者的用法及区别
Nov 17 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 Javascript
jQuery DateTimePicker 日期和时间插件示例
Jan 22 Javascript
js获取地址栏参数的两种方法
Jun 27 Javascript
js实现可以点击收缩或张开的悬浮窗
Sep 18 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 28 Javascript
基于JavaScript实现年月日三级联动
Jun 22 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
无数据库的详细域名查询程序PHP版(5)
2006/10/09 PHP
解析PHP的session过期设置
2013/06/29 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
PHP数组遍历知识汇总(包含遍历方法、数组指针操作函数、数组遍历测速)
2014/07/05 PHP
PHP运行模式汇总
2016/11/06 PHP
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
JQuery的一些小应用收集
2010/03/27 Javascript
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
2014/06/04 Javascript
JavaScript实现的石头剪刀布游戏源码分享
2014/08/22 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
2016/08/18 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
2016/10/27 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
2018/05/08 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
微信小程序实现笑脸评分功能
2018/11/03 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
Python 3.x 连接数据库示例(pymysql 方式)
2017/01/19 Python
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
区分python中的进程与线程
2020/08/13 Python
用Python进行websocket接口测试
2020/10/16 Python
Python实现图片指定位置加图片水印(附Pyinstaller打包exe)
2021/03/04 Python
德国圣伯纳德草药屋:Kräuterhaus Sanct Bernhard(有中文站)
2018/08/05 全球购物
乌克兰在线药房:Аптека24
2019/10/30 全球购物
信贷客户经理岗位职责
2015/04/09 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL