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

图片轮播效果 :

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

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

用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实现圆点图片轮播效果,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

时间: 2017-03-18

Jquery代码实现图片轮播效果(一)

文章写的不好,还请各位高手指教,不废话了,先上张效果图吧看下: 在线演示         下载源码 首先是初始化部分:将除了第一张轮播图片意外的图片都隐藏,并且隐藏向前.向后按钮,使第一个索引按钮处于激活状态. 事件部分:通过jquery的hover()绑定鼠标上悬以及离开时的事件处理, jquery的bind()方法绑定鼠标点击事件处理向前.向后翻动.轮播控制:pre(), next(), play(), start()开始自动轮播,stop()停止自动轮播. 下篇是一个纯粹的jquery轮播

原生js和jquery实现图片轮播淡入淡出效果

图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管怎样,构造一个最基本的表现层是必须的 简单的图片轮播一般由几个部分构成. 对于淡入淡出式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后

12款经典的白富美型—jquery图片轮播插件—前端开发必备

图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你. Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色: ✓  16个独特的过渡效果

jQuery图片轮播的具体实现

效果如下: 先看一看html代码,以及对应的css代码: 复制代码 代码如下: <div id="scrollPics">    <ul class="slider" >        <li><img src="images/ads/1.gif"/></li>        <li><img src="images/ads/2.gif"/>&

基于JQuery的实现图片轮播效果(焦点图)

完整的演示代码: JQuery实现图片轮播效果 [实例演示] 1 2 3 4 // = count) return; $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt')); $("#banner_info").unbind().click(function(){window.open($("#banner_list a&qu

基于jquery的图片轮播 tab切换组件

目前只添加了scroll和none的效果,scroll即滑动的效果,可以支持x和y方向的滑动:none就是没有任何效果,只是显示和隐藏,后续需要添加其他效果再做扩展,写的有点水,呵呵,在此留笔,防止丢失. Demo Address:http://demo.jb51.net/js/2012/sinaapp/ 复制代码 代码如下: /** * 巨无霸轮播 */ $.fn.loopSlider = function(option) { var setting = { // 默认显示的顺序 initIn

原生js和jquery实现图片轮播特效

(1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头 5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li) 7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div

jQuery实现图片轮播特效代码分享

本文实例讲述了jQuery超精致图片轮播幻灯片特效.分享给大家供大家参考.具体如下: jquery图片轮播插件PgwSlider是一款非常简单的jquery插件,它可以帮你快速创建一个垂直轮播图. 运行效果图: 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: <link href="css/pgwslider.min.css" rel="stylesheet"> (2)js代码: <script sr

原生JS实现旋转木马式图片轮播插件

本人自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的,淡入淡出切换的.现在想做一个酷一点的放在博客或者个人网站,到时候可以展示自己的作品.逛了一下慕课网,发现有个旋转木马的jquery插件课程,有点酷酷的,于是就想着用原生JS封装出来.做起来才发现,没有自己想象中的那么容易...不啰嗦了,讲解一下实现过程吧. 二.效果 由于自己的服务器还没弄好.在线演示不了(ORZ...),只能放一张效果图了. 从图片上还是可以看出大概效果的,我就不多说了.想看

原生js和css实现图片轮播效果

本文实例为大家分享了javascript图片轮播效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>图片轮播</title> <style> #box { width:506px; height:306px; margin: 20px auto; b

js制作网站首页图片轮播特效代码

本文实例为大家分享了使用js制作一般网站首页图片轮播效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style> .warp{ width: 600px; height: 750px; position: relative;

jQuery实现图片轮播效果代码(基于jquery.pack.js插件)

本文实例讲述了jQuery实现图片轮播效果代码.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

原生js实现图片轮播特效

本文特意为原生js实现图片轮播特效代码做了下总结,分享给大家供大家参考,欢迎大家学习. 运行效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>最简单的轮播广告</title> <style> body, div, ul, li { margin: 0; padding: 0

使用JQuery实现图片轮播效果的实例(推荐)

[效果如图] [原理简述] 这里大概说一下整个流程: 1,将除了第一张以外的图片全部隐藏, 2,获取第一张图片的alt信息显示在信息栏,并添加点击事件 3,为4个按钮添加点击侦听,点击相应的按钮,用fadeOut,fadeIn方法显示图片 4,设置setInterval,定时执行切换函数 [代码说明] filter(":visible") :获取所有可见的元素 unbind():从匹配的元素中删除绑定的事件 siblings:取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元

jquery图片轮播特效代码分享

本文实例讲述了jquery图片轮播特效.分享给大家供大家参考.具体如下: 这是一款仿淘宝首页jquery轮播焦点图,基于jquery实现仿淘宝网首页正中间小焦点图特效. 运行效果图:         -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery图片轮播特效代码如下 <!DOCTYPE html> <head> <meta http-equiv=