我们在开发当中经常用到轮播。我在这里总结了一下几种，仅供参考：

第一种：

　　1、jQuery：用display ：none/block控制的一种轮播；

  1. // CSS部分
  2. #igs {
  3.     margin: 30px auto;
  4.     width: 1200px;
  5.     height: 460px;
  6.     position: relative;
  7. }
  8.  
  9. .ig {
  10.     position: absolute;
  11. }
  12.  
  13. #tabs {
  14.     position: absolute;
  15.     list-style: none;
  16.     background-color: rgba(255,255,255,.5);
  17.     left: 500px;
  18.     bottom: 10px;
  19.     border-radius: 10px;
  20.     padding: 5px 0 5px 5px;
  21. }
  22.  
  23. .tab{
  24.     float: left;
  25.     text-align: center;
  26.     line-height: 20px;
  27.     width: 20px;
  28.     height: 20px;
  29.     cursor: pointer;
  30.     overflow: hidden;
  31.     margin-right: 4px;
  32.     border-radius: 100%;
  33.     background-color: rgb(200,100,150);
  34. }
  35.  
  36. .tab.active{
  37.     background-color: red;
  38.     color: #fff;
  39. }
  40.  
  41. .btn{
  42.     position: absolute;
  43.     top: 200px;
  44.     width: 40px;
  45.     color: #fff;
  46.     height: 100px;
  47.     background-color: rgba(255,255,255,.3);
  48.     font-size: 40px;
  49.     font-weight: bold;
  50.     text-align: center;
  51.     line-height: 100px;
  52.     border-radius: 5px;
  53.     margin: 0 5px;
  54. }
  55.  
  56. .btn2{
  57.     position: absolute;
  58.     right: 0px;
  59. }
  60.  
  61. .btn:hover{
  62.     background-color: rgba(0,0,0,.7);
  63. }
  64.  
  65. // HTML部分
  66.         <div id="igs">
  67.               <a class="ig" href="#">1<img src="data:images/slider-1.jpg"/></a>
  68.               <a class="ig" href="#">2<img src="data:images/slider-2.jpg"/></a>
  69.               <a class="ig" href="#">3<img src="data:images/slider-3.jpg"/></a>
  70.               <a class="ig" href="#">4<img src="data:images/slider-4.jpg"/></a>
  71.               <a class="ig" href="#">5<img src="data:images/slider-5.jpg"/></a>
  72.               <div class="btn btn1"><</div>
  73.               <div class="btn btn2">></div>
  74.               <ul id="tabs">
  75.                   <li class="tab active">1</li>
  76.                   <li class="tab">2</li>
  77.                   <li class="tab">3</li>
  78.                   <li class="tab">4</li>
  79.                   <li class="tab">5</li>
  80.               </ul>
  81.         </div>
  82.  
  83. // JavaScript部分
  84.             //定义全局变量和定时器
  85.             var i = 0 ;
  86.             var timer;
  87.  
  88.             $(function(){
  89.                   //用jquery方法设置第一张图片显示，其余隐藏
    　　　　　　　　　　 // $("#igs a:not(:first-child)").hide()；这样操作的话可以把a链接里面的class取消掉
  90.                   $('.ig').eq(0).show().siblings('.ig').hide();
  91.  
  92.                   //调用showTime()函数（轮播函数）
  93.                   showTime();
  94.  
  95.                   //当鼠标经过下面的数字时，触发两个事件（鼠标悬停和鼠标离开）
  96.                   $('.tab').hover(function(){
  97.                       //首先清除时间函数
  98.                     clearInterval(timer);
  99.                     //获取当前i的值，调用轮播函数
  100.                     i = $(this).index();
  101.                     Show();
  102.                   },function(){
  103.                        //鼠标离开时开启时间函数
  104.                     showTime();
  105.                   });
  106.  
  107.                 //鼠标点击左侧的箭头
  108.                 $('.btn1').click(function(){
  109.                     clearInterval(timer);
    　　　　　　　　　　　　i--;
  110.                     if(i == 0){
  111.                         //注意此时i的值
  112.                           i = $('.ig').length;
  113.                     }
  114.                     Show();
  115.                     showTime();
  116.                 });
  117.  
  118.                 //鼠标点击右侧的箭头
  119.                 $('.btn2').click(function(){
  120.                     clearInterval(timer);
    　　　　　　　　　　　　i++;
  121.                     if(i == $('.ig').length - 1){
  122.                         //当图片是最后一张时，点击右箭头，
  123.                           i = -1;
  124.                     }
  125.                     Show();
  126.                     showTime();
  127.                 });
  128.             });
  129.  
  130.             //创建一个showTime函数
  131.             function showTime(){
  132.                   //设置定时器
  133.                   timer = setInterval(function(){
  134.                     //调用一个Show()函数
  135.                     Show();
  136.                     i++;
  137.                     //当图片是最后一张的后面时，设置图片为第一张
  138.                     if(i == 5){
  139.                           i = 0;
  140.                     }
  141.                   },2000);
  142.             }
  143.  
  144.             //创建一个Show函数
  145.             function Show(){
  146.                   //在这里可以用其他jquery的动画
  147.                   $('.ig').eq(i).fadeIn(300).siblings('.ig').fadeOut(300);
  148.  
  149.                   //给.tab创建一个新的Class为其添加一个新的样式，并且要在css代码中设置该样式
  150.                   $('.tab').eq(i).addClass('active').siblings('.tab').removeClass('active');
  151.             }

　　2、Javascript：用display ：none/block控制的一种轮播；

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <style>
  6.     .container{
  7.         width:1130px;
  8.         height:500px;
  9.         margin:0 auto;
  10.         position:relative;
  11.     }
  12.     .inner{
  13.         width:1130px;
  14.         height:500px;
  15.     }
  16.     .inner-img{
  17.         width:1130px;
  18.         height:500px;
  19.         display: none;
  20.         position:absolute;
  21.         top:0;
  22.         left:0;
  23.         z-index:1;
  24.     }
  25.     .inner-img.active{
  26.         display: block;
  27.     }
  28.     .leftBtn,.rightBtn{
  29.         position:absolute;
  30.         width:40px;
  31.         height:60px;
  32.         background:rgba(0,0,0,0.3);
  33.         font-size: 30px;
  34.         color:#fff;
  35.         text-align: center;
  36.         line-height: 60px;
  37.         cursor:pointer;
  38.         z-index: 11;
  39.         display:none;
  40.     }
  41.     .leftBtn{
  42.         left:5px;
  43.         top:200px;
  44.     }
  45.     .rightBtn{
  46.         right:5px;
  47.         top:200px;
  48.     }
  49.     .container ul{
  50.         position:absolute;
  51.         left:520px;
  52.         bottom:10px;
  53.         z-index: 11;
  54.         list-style: none;
  55.         width:100px;
  56.         height:20px;
  57.     }
  58.     .container ul .page{
  59.         float:left;
  60.         width:18px;
  61.         height:18px;
  62.         border-radius:18px;
  63.         background: black;
  64.         margin-right: 6px;
  65.         color: #fff;
  66.         font-size: 12px;
  67.         text-align: center;
  68.         line-height: 18px;
  69.         cursor: pointer;
  70.     }
  71.     .container ul .page.active{
  72.         background-color: red;
  73.     }
  74.     </style>
  75. </head>
  76. <body>
  77.     <div class="container">
  78.         <div class="inner">
  79.             <a href="#" class="inner-img active"><img src="data:images/TB1.Ez0IVXXXXcbXFXXz1yY.pXX-1130-500.jpg_q100.jpg" alt=""></a>
  80.             <a href="#" class="inner-img"><img src="data:images/TB1dpJtJFXXXXXsXFXXz1yY.pXX-1130-500.jpg_q100.jpg" alt=""></a>
  81.             <a href="#" class="inner-img"><img src="data:images/TB14aRbJFXXXXagXVXXXXXXXXXX-1130-500.jpg_q100.jpg" alt=""></a>
  82.             <a href="#" class="inner-img"><img src="data:images/TB15AHZIVXXXXX7XFXXSutbFXXX.jpg_q100.jpg" alt=""></a>
  83.         </div>
  84.         <div class="leftBtn">&lt;</div>
  85.         <div class="rightBtn">&gt;</div>
  86.         <ul>
  87.             <li class="page active">1</li>
  88.             <li class="page">2</li>
  89.             <li class="page">3</li>
  90.             <li class="page">4</li>
  91.         </ul>
  92.     </div>
  93.     <script>
  94.     var container = document.getElementsByClassName('container')[0],
  95.     // 获取所有包含图片的链接
  96.         innerImg = document.getElementsByClassName('inner-img'),
  97.     // 获取左右按钮
  98.         btnL = document.getElementsByClassName('leftBtn')[0],
  99.         btnR = document.getElementsByClassName('rightBtn')[0],
  100.         // 获取分页器
  101.         page = document.getElementsByClassName('page'),
  102.         // 声明变量
  103.         num = 0;
  104.     // 声明时间控制函数
  105.     var timer = setInterval(moveR, 1000);
  106.     // 图片向右轮播
  107.     function moveR() {
  108.         // 变量每1000毫秒递增一次,图片向右轮播
  109.         num++;
  110.         // 如果是最后一张图片的时候从0开始显示
  111.         if (num == innerImg.length) {
  112.             num = 0;
  113.         }
  114.         move();
  115.     };
  116.  
  117.     // 图片向左轮播
  118.     function moveL() {
  119.         // 每调用一次moveL(),变量递减一次
  120.         num--;
  121.         // 如果是第一张图片，则从最后一张图片开始显示
  122.         if (num == -1) {
  123.             num = innerImg.length - 1;
  124.         };
  125.         move();
  126.     }
    　　
    　　 // 图片切换
    　　 function move(){
  1.  　　　　// 把所有的innerImg隐藏和page背景全部变成黑色
  2.         for (var i = 0; i < innerImg.length; i++) {
  3.             innerImg[i].style.display = 'none';
  4.             page[i].style.background = 'black';
  5.         }
  6.         // 把当前num下标的innerImg显示和page背景变成red
  7.         innerImg[num].style.display = 'block';
  8.         page[num].style.background = 'red';
  1. 　　 }
  2.     // 分页器鼠标滑过时图片切换
  3.     for (var i = 0; i < page.length; i++) {
  4.         // 用来保存下标，page[i].index == 0 / 1 / 2 / 3
  5.         page[i].index = i;
  6.         // console.log(page[i].index);
  7.         // 因为已经保存好的下边，这里的page[i], page[0], page[1], page[2], page[3]
  8.         page[i].onmouseover = function() {
  9.             for (var j = 0; j < page.length; j++) {
  10.                 page[j].style.background = 'black';
  11.                 innerImg[j].style.display = 'none';
  12.             }
  13.             this.style.background = 'red';
    　　　　　　　// console.log(this.index);可以查看是多少
  14.             innerImg[this.index].style.display = 'block';
  15.             num = this.index;
  16.         }
  17.     }
  18.     btnL.onclick = function() {
  19.         moveR();
  20.     }
  21.     btnR.onclick = function() {
  22.         moveL();
  23.     }
  24.  
  25.     // 鼠标划上container时让左右按钮显示
  26.     container.onmouseover = function() {
  27.         // 清除时间函数
  28.         clearInterval(timer);
  29.         btnR.style.display = 'block';
  30.         btnL.style.display = 'block';
  31.     }
  32.  
  33.     // 鼠标离开container时让左右按钮隐藏
  34.     container.onmouseout = function() {
  35.         // 开启时间函数
  36.         timer = setInterval(moveR, 3000);
  37.         btnR.style.display = 'none';
  38.         btnL.style.display = 'none';
  39.     }
  40.     </script>
  41. </body>
  42. </html>

第二种：

　　1、用jQuery实现的跑马灯效果；

　　HTML：

  1.     <div class="container">
  2.         <div class="inner-img">
  3.             <div class="img"><img src="img/1.jpg" height="100%" width="100%" alt="" /></div>
  4.             <div class="img"><img src="img/2.jpg" height="100%" width="100%" alt="" /></div>
  5.             <div class="img"><img src="img/3.jpg" height="100%" width="100%" alt="" /></div>
  6.             <div class="img"><img src="img/4.jpg" height="100%" width="100%" alt="" /></div>
  7.             <div class="img"><img src="img/5.jpg" height="100%" width="100%" alt="" /></div>
  8.             <div class="img"><img src="img/6.jpg" height="100%" width="100%" alt="" /></div>
  9.         </div>
  10.         <div class="btn-left">&lt;</div>
  11.         <div class="btn-right">&gt;</div>
  12.     </div>

　　CSS：

  1. .container{
  2.     width: 1000px;
  3.     height: 300px;
  4.     border: 1px solid #666;
  5.     margin: 100px auto;
  6.     position: relative;
  7.     overflow: hidden;
  8. }
  9. .inner-img{
  10.     /*如果显示是五张图片，这里必须要等于 + 一张图片的width*/
  11.     width: 1200px;
  12.     height: 300px;
  13.     background-color: #ccc;
  14.     position: absolute;
  15.     left:;
  16.     top:;
  17. }
  18. .img{
  19.     width: 200px;
  20.     height: 100%;
  21.     float: left;
  22.     font-size: 50px;
  23.     text-align: center;
  24.     line-height: 300px;
  25.     padding: 20px;
  26.     box-sizing: border-box;
  27.     /*overflow: hidden;*/
  28. }
  29. .btn-left,.btn-right{
  30.     width: 30px;
  31.     height: 60px;
  32.     color: #fff;
  33.     background: #000;
  34.     font-size: 30px;
  35.     text-align: center;
  36.     line-height: 60px;
  37.     opacity: 0.5;
  38.     display: none;
  39. }
  40. .btn-left{
  41.     position:absolute;
  42.     left: 0px;
  43.     top: 120px;
  44. }
  45. .btn-right{
  46.     position:absolute;
  47.     right: 0px;
  48.     top: 120px;
  49. }

　　JavaScript：

  1. // 可以把整个代码封装成一个函数，后期可以传参，用来控制一次可以切换几张图片
  2. $(document).ready(function() {
  3.     // 获取包含图片的盒子的宽度
  4.     var imgW = $(".img").outerWidth();
  5.     // 指定计时器
  6.     var t = setInterval(moveL, 2000);
  7.  
  8.     function moveL() {
  9.         /*
  10.          *.stop()：停止当前正在运行的动画，表示两个参数都是false；
  11.          *.stop(true，true)：停止被选元素的所有加入队列的动画，但允许完成当前动画。
  12.          */
  13.         $(".inner-img").stop(true, true);
  14.         /*
  15.          *1、首先将inner-img的left: 0转换为left：-200px
  16.          *2、将inner-img的第一个子元素appendTo()到inner-img里面
  17.          *3、再次设置inner-img的left：-200px;
  18.          */
  19.         $(".inner-img").animate({
  20.             left: -imgW
  21.         }, function() {
  22.             // 讲已经切换到-200px的第一张图片appendTo到父元素里面，这也是跑马灯效果的秘诀
  23.             $(".inner-img > .img").first().appendTo($(".inner-img"));
  24.             $(".inner-img").css({
  25.                 left: 0
  26.             });
  27.         })
  28.     };
  29.     // 向右的轮播
  30.     function moveR() {
  31.         $(".inner-img").stop(true, true);
  32.         $(".inner-img").css({
  33.             left: -imgW
  34.         });
  35.         $(".inner-img > .img").last().prependTo($(".inner-img"));
  36.         $(".inner-img").animate({
  37.             left: 0
  38.         });
  39.     };
  40.     // 鼠标滑上，滑下效果
  41.     $(".container").hover(function() {
  42.         // 当鼠标滑过父容器时清除时间函数
  43.         clearInterval(t);
  44.         // 并且将左右按钮显示出来
  45.         $(".btn-left").add(".btn-right").fadeIn(50);
  46.     }, function() {
  47.         // 当鼠标滑过父容器时开启时间函数
  48.         t = setInterval(moveL, 2000);
  49.         // 并且将左右按钮隐藏
  50.         $(".btn-left").add(".btn-right").fadeOut(50);
  51.     });
  52.     // 点击左边的按钮向右切换图片
  53.     $(".btn-left").click(function() {
  54.         moveR();
  55.     });
  56.     // 点击右边的按钮向左切换图片
  57.     $(".btn-right").click(function() {
  58.         moveL();
  59.     })
  60. });

　　2、用JavaScript实现的跑马灯效果；

第三种：

　　1、用jQuery实现的无缝轮播

　　HTML：

  1.         <div class="banner">
  2.             <ul class="img">
  3.                 <li><a href=""><img src="img/1.jpg" alt="" /></a></li>
  4.                 <li><a href=""><img src="img/2.jpg" alt="" /></a></li>
  5.                 <li><a href=""><img src="img/3.jpg" alt="" /></a></li>
  6.                 <li><a href=""><img src="img/4.jpg" alt="" /></a></li>
  7.                 <li><a href=""><img src="img/5.jpg" alt="" /></a></li>
  8.             </ul>
  9.             <ul class="page"></ul>
  10.             <div class="btn btn_l">&lt;</div>
  11.             <div class="btn btn_r">&gt;</div>
  12.         </div>

　　CSS：　　

  1. * {
  2.     padding: 0px;
  3.     margin: 0px;
  4.     list-style: none;
  5.     font-family: "微软雅黑";
  6. }
  7.  
  8. .banner {
  9.     width: 740px;
  10.     height: 350px;
  11.     margin: 100px auto;
  12.     border: 1px solid #808080;
  13.     position: relative;
  14.     overflow: hidden;
  15. }
  16.  
  17. .banner .img {
  18.     width: 5000px;
  19.     position: absolute;
  20.     left: 0px;
  21.     top: 0px;
  22. }
  23.  
  24. .banner .img li {
  25.     width: 740px;
  26.     height: 350px;
  27. }
  28.  
  29. .banner .img li a {
  30.     display: block;
  31.     width: 100%;
  32.     height: 100%;
  33. }
  34.  
  35. .banner .img li {
  36.     float: left;
  37. }
  38.  
  39. .banner .page {
  40.     position: absolute;
  41.     width: 100%;
  42.     bottom: 10px;
  43.     left: 0px;
  44.     text-align: center;
  45.     font-size: 0px;
  46. }
  47.  
  48. .banner .page li {
  49.     width: 20px;
  50.     height: 20px;
  51.     background-color: #888;
  52.     border-radius: 50%;
  53.     display: inline-block;
  54.     margin: 0px 3px;
  55.     cursor: pointer;
  56.     color: #fff;
  57. }
  58.  
  59. .banner .page li.active {
  60.     background-color: #ff6a00;
  61. }
  62.  
  63. .banner .btn {
  64.     width: 30px;
  65.     height: 50px;
  66.     background-color: #808080;
  67.     opacity: 0.5;
  68.     filter: alpha(opacity:0.5);
  69.     position: absolute;
  70.     top: 50%;
  71.     margin-top: -25px;
  72.     cursor: pointer;
  73.     text-align: center;
  74.     line-height: 50px;
  75.     font-size: 40px;
  76.     color: #fff;
  77.     display: none;
  78. }
  79.  
  80. .banner .btn_l {
  81.     left: 0px;
  82. }
  83.  
  84. .banner .btn_r {
  85.     right: 0px;
  86. }
  87.  
  88. .banner:hover .btn {
  89.     display: block;
  90. }

　　JavaScript：

  1.             $(function() {
  2.                 //声明当前图片的索引值
  3.                 var num = 0;
  4.                 //克隆第一张图片
  5.                 var clone = $('.img li').first().clone();
  6.                 //获取图片的宽度
  7.                 var imgW = $('.img li').first().width();
  8.                 //将第一张图片插入到img容器里面里面
  9.                 $('.banner .img').append(clone);
  10.                 //获取插入之后li的个数
  11.                 var size = $('.img li').size();
  12.                 //动态的根据图片数量创建分页器并且插入到num里面
  13.                 for(var i = 0; i < size - 1; i++) {
  14.                     $('.page').append('<li></li>');
  15.                 }
  16.                 //给创建的分页器的第一个添加active的类
  17.                 $('.page li').first().addClass('active');
  18.                 //创建一个时间函数用来控制图片切换的方式
  19.                 var timer = setInterval(function() {
  20.                     num++;
  21.                     move();
  22.                 }, 1000);
  23.  
  24.                 //move函数
  25.                 function move() {
  26.                     if(num == size) {
  27.                         //当运动到最后一张图片时，重置整个img到left：0的位置
  28.                         $('.banner .img').css({
  29.                             left: 0
  30.                         });
  31.                         num = 1;
  32.                     }
  33.  
  34.                     //点击右边按钮时
  35.                     if(num == -1) {
  36.                         $('.img').css({
  37.                             left: -(size - 1) * imgW
  38.                         })
  39.                         num = size - 2;
  40.                     }
  41.  
  42.                     //随着num的递增，img容器以animate的方式向左移动-imgW * num的距离
  43.                     $('.banner .img').stop().animate({
  44.                         left: -imgW * num
  45.                     }, 500);
  46.  
  47.                     //当num等于图片数量时，选取第一个分页器设置样式，否则，等于当前按照num设置分页器的样式。
  48.                     if(num == size - 1) {
  49.                         $('.page li').eq(0).addClass('active').siblings().removeClass('active');
  50.                     } else {
  51.                         $('.page li').eq(num).addClass('active').siblings().removeClass('active');
  52.                     }
  53.                 };
  54.  
  55.                 //点击分页器
  56.                 $('.page li').click(function(){
  57.                     //获取到当前分页器的下标并且赋值给当前图片的下标
  58.                     num = $(this).index();
  59.                     move();
  60.                 })
  61.  
  62.                 //点击右按钮时向右切换图片
  63.                 $('.btn_r').click(function() {
  64.                     num--;
  65.                     move();
  66.                 })
  67.  
  68.                 //点击左边按钮时切换图片
  69.                 $('.btn_l').click(function() {
  70.                     num++;
  71.                     move();
  72.                 })
  73.  
  74.                 //鼠标滑过banner容器时
  75.                 $('.banner').hover(function() {
  76.                     //首先清除时间函数
  77.                     clearInterval(timer);
  78.                 }, function() {
  79.                     //鼠标离开时调用时间函数
  80.                     timer = setInterval(function() {
  81.                         num++;
  82.                         move();
  83.                     }, 1000)
  84.                 })
  85.             })

　　2、用js实现的无缝轮播

　　HTML：

  1.         <div class="win">
  2.             <a href="javascript:;"><img src="img/1.jpg" title=""></a>
  3.             <a href="javascript:;"><img src="img/2.jpg" title=""></a>
  4.             <a href="javascript:;"><img src="img/3.jpg" title=""></a>
  5.             <a href="javascript:;"><img src="img/4.jpg" title=""></a>
  6.             <a href="javascript:;"><img src="img/5.jpg" title=""></a>
  7.             <div class="btn">
  8.                 <div class="btnL">&lt;</div>
  9.                 <div class="btnR">&gt;</div>
  10.             </div>
  11.             <ul class="circle">
  12.                 <li class="active"></li>
  13.                 <li></li>
  14.                 <li></li>
  15.                 <li></li>
  16.                 <li></li>
  17.             </ul>
  18.         </div>

　　css：

  1. .win{
  2.     height: 350px;
  3.     width: 740px;
  4.     margin: 20px auto;
  5.     position: relative;
  6.      overflow: hidden;
  7. }
  8. .win a{
  9.     position: absolute;
  10.     top:;
  11.     left:;
  12. }
  13. .btn{
  14.     width: 740px;
  15.     height: 70px;
  16.     font-size: 30px;
  17.     line-height: 70px;
  18.     text-align: center;
  19.     position: absolute;
  20.     left:;
  21.     top: 50%;
  22.     margin-top: -35px;
  23. }
  24. .btn .btnL, .btn .btnR{
  25.     width: 35px;
  26.     height: 70px;
  27.     font-size: 30px;
  28.     line-height: 70px;
  29.     text-align: center;
  30.     color: #fff;
  31.     float: left;
  32.     background: black;
  33.     opacity: 0.5;
  34.     filter:alpha(opacity:50);
  35.     cursor: pointer;
  36. }
  37. .btn .btnL{
  38.     float: left;
  39. }
  40. .btn .btnR{
  41.     float: right;
  42. }
  43. .circle{
  44.     height: 15px;
  45.     width: 90px;
  46.     margin-left: 5px;
  47.     float: left;
  48.     position: absolute;
  49.     left: 50%;
  50.     margin-left: -33px;
  51.     bottom: 10px;
  52.     z-index:;
  53. }
  54. .circle li{
  55.     height: 15px;
  56.     width: 15px;
  57.     background: #ccc;
  58.     opacity: 0.5;
  59.     filter:aplha(opacity:50);
  60.     border-radius: 50%;
  61.     margin-left: 3px;
  62.     float: left;
  63. }
  64. .circle li.active{
  65.     background: #e40077;
  66. }

　　JavaScript：

  1.         <script type="text/javascript">
  2.             window.onload = function(){
  3.                 // 最大的容器
  4.                 var win = document.getElementsByClassName('win')[0];
  5.                 // 包含图片的a链接
  6.                 var as = win.getElementsByTagName('a');
  7.                 // 分页器
  8.                 var lis = document.getElementsByClassName('circle')[0].getElementsByTagName('li');
  9.                 //获取图片的尺寸
  10.                 var widths = parseInt(as[0].clientWidth);
  11.                 // 左右的按钮
  12.                 var btnL = win.getElementsByClassName('btnL')[0];
  13.                 var btnR = win.getElementsByClassName('btnR')[0];
  14.                 //定义双下标
  15.                 var num = 0;
  16.                 var next = 0;
  17.                 // 设定开关，如果当前动画没有完成，则停止操作到当前动画完成
  18.                 var flag = true;
  19.  
  20.                 // 首先初始化所有图片的位置，但是将第一张图片就位到left：0的位置
  21.                 for (var i = 0; i < as.length; i++) {
  22.                     // 跳过本次循环
  23.                     if (i == 0) {
  24.                         continue;
  25.                     };
  26.                     as[i].style.left = widths + 'px';
  27.                 };
  28.  
  29.                 // 设定时间函数，每隔两秒动画一次
  30.                 var timer = setInterval(moveL, 2000);
  31.  
  32.                 // 向左切换的函数
  33.                 function moveL(){
  34.                     next++;
  35.                     // 如果是最后一张图片，从第一张图片开始
  36.                     if(next == as.length){
  37.                         next = 0;
  38.                     }
  39.                     // 让下一张图片到右边就为准备
  40.                     as[next].style.left = widths + 'px';
  41.                     // 将当前分页器的样式取消，加给下一张图片
  42.                     lis[num].className = '';
  43.                     lis[next].className = 'active';
  44.                     //动画：让当前的图片到左边去
  45.                     animate(as[num], {
  46.                         left: -widths
  47.                     });
  48.                     // //动画：下一张图片放到当前的位置
  49.                     animate(as[next], {
  50.                         left: 0
  51.                     }, function(){
  52.                         flag = true;
  53.                     })
  54.                     // 更新下标
  55.                     num = next;
  56.                 }
  57.  
  58.                 // 想左切换的函数
  59.                 function moveR(){
  60.                     next--;
  61.                     // 如果是第一张图片，从最后一张图片开始。
  62.                     if(next == -1){
  63.                         next = as.length - 1;
  64.                     }
  65.                     // 让下一张图片到左边定位边就为准备
  66.                     as[next].style.left = -widths + 'px';
  67.                     lis[num].className = '';
  68.                     lis[next].className = 'active';
  69.                     // 动画：让当前的图片到右边去
  70.                     animate(as[num], {
  71.                         left: widths
  72.                     })
  73.                     // 动画：让下一张图片到当前的位置
  74.                     animate(as[next], {
  75.                         left: 0
  76.                     }, function(){
  77.                         flag = true;
  78.                     });
  79.                     // 更新下标
  80.                     num = next;
  81.                 }
  82.  
  83.                 // 分页器切换图片
  84.                 for (var i = 0; i < lis.length; i++) {
  85.                     // 保存下标lis[i].index == i，方便后期给每个lis添加点击事件
  86.                     lis[i].index = i;
  87.                     // 给每个lis添加点击事件
  88.                     lis[i].onclick = function(){
  89.                         for(var j = 0; j < lis.length; j++){
  90.                             // 如果点击的是当前一张图片，即num == this.index；不能切换图片
  91.                             if (num == this.index) {
  92.                                 return;
  93.                             };
  94.                             // 让当前的下标的图片就位到右边
  95.                             as[this.index].style.left = widths + 'px';
  96.                             lis[num].className = '';
  97.                             lis[this.index].className = 'active';
  98.                             // 将当前的一张移动到left：-width的位置
  99.                             animate(as[num], {
  100.                                 left: -widths
  101.                             });
  102.                             // 将符合下标的一张图片移动到left：0的位置
  103.                             animate(as[this.index], {
  104.                                 left: 0
  105.                             })
  106.                             // 更新下标
  107.                             num = this.index;
  108.                         }
  109.                     }
  110.                 };
  111.  
  112.                 // 点击右边向想左移动
  113.                 btnR.onclick = function(){
  114.                     if (flag) {
  115.                         flag = false;
  116.                         moveL();
  117.                     }
  118.                 }
  119.  
  120.                 // 点击左边向想左移动
  121.                 btnL.onclick = function(){
  122.                     if (flag) {
  123.                         flag = false;
  124.                         moveR();
  125.                     }
  126.                 }
  127.  
  128.                 // 鼠标滑过win时清除时间函数
  129.                 win.onmouseover = function() {
  130.                     clearInterval(timer);
  131.                 };
  132.  
  133.                 // 鼠标离开win时开启时间函数
  134.                 win.onmouseout = function() {
  135.                     timer = setInterval(moveL, 2000);
  136.                 };
  137.             }
  138.         </script>

 

。

web的几种轮播的更多相关文章

  1. 调用MyFocus库，简单实现二十几种轮播效果

    一.首先点击这里下载myFocus库文件,标准文件库就行了,很小仅仅1.4M. myFocus库有以下的好处: a . 文件小巧却高效强大,能够实现二十几种轮播的效果. b . 极其简单的使用,只需要 ...

  2. web常见效果之轮播图

    轮播图的展示效果是显而易见: HTML代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  3. OC可点击的两种轮播图效果

    基本上,每一个APP都有一个轮播图的效果展示,一般都是用来展示图片的一些信息,然后可以点击查看或购买,所以在此我将这种轮播图进行了一个类的封装,效果包含两种形式:第一种,来回轮转样式,第二种,一个方向 ...

  4. 移动web——bootstrap响应式轮播图

    基本介绍 1.bootstrap有轮播图的模板,我们只需要改动下就行. 2.这里我们将介绍桌面版本和移动版本最后是综合版本 桌面版本 1.这里的图片设置是有窍门的,不再去添加img标签,而是作为a标签 ...

  5. Web前端JS实现轮播图原理

    实现轮播图有很多方式,但是html的结构都是一样的.本文使用了Jquery框架,Dom操作更加方便灵活 html部分: <div class="banner"> < ...

  6. Javascript轮播 支持平滑和渐隐两种效果（可以只有两张图）

    先上两种轮播效果:渐隐和移动   效果一:渐隐 1 2 3 4 效果二:移动 1 2 3 4 接下来,我们来大致说下整个轮播的思路: 一.先来看简单的,移动的,先上来一个图----移动效果图: 说明: ...

  7. Javscript轮播 支持平滑和渐隐两种效果（可以只有两张图）

    原文:Javscript轮播 支持平滑和渐隐两种效果(可以只有两张图) 先上两种轮播效果:渐隐和移动   效果一:渐隐 1 2 3 4 效果二:移动 1 2 3 4 接下来,我们来大致说下整个轮播的思 ...

  8. Javascript轮播 支持平滑和渐隐两种效果

    Javascript轮播 支持平滑和渐隐两种效果 先上两种轮播效果:渐隐和移动   效果一:渐隐 1 2 3 4 效果二:移动 1 2 3 4 接下来,我们来大致说下整个轮播的思路: 一.先来看简单的 ...

  9. 一分钟搞定AlloyTouch图片轮播组件

    轮播图也涉及到触摸和触摸反馈,同时,AlloyTouch可以把惯性运动打开或者关闭,并且设置min和max为运动区域,超出会自动回弹. 除了一般的竖向滚动,AlloyTouch也可以支持横向滚动,甚至 ...

随机推荐

  1. Jmeter入门（压力测试）

    Jmeter介绍 Jmeter是一款使用Java开发的,开源免费的,测试工具, 主要用来做功能测试和性能测试(压力测试/负载测试). 而且用Jmeter 来测试 Restful API, 非常好用. ...

  2. 流程图 Graphviz - Graph Visualization Software

    0.目录 1.参考 https://www.processon.com/  应该值得一试 知乎 用什么软件画流程图? 9款国内外垂直领域的在线作图工具[可代替visio] 程序员必知的七个图形工具 说 ...

  3. python之string模块常量：数字，26个字母，标点符号，空白

    In [8]: import string In [9]: dir(string) In [10]: string.ascii_letters Out[10]: 'abcdefghijklmnopqr ...

  4. Python学习（二十二）—— 前端基础之BOM和DOM

    转载自http://www.cnblogs.com/liwenzhou/p/8011504.html 一.前言 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没 ...

  5. Python中元类

    元类(metaclass) 简单地说,元类就是一个能创建类的类,而类class 是由type创建的,class可以创建对象 type与object的关系详见:python中type和object 1. ...

  6. django-admin 仿写stark组件action,filter筛选过滤,search查询

    写在StandLi里面的方法都是通过ModelSubject这个类里面的stand_li方法,在它里面用StandLi这个类实例化出来一个对象,这个实例化出来的对象把数据传给前端HTML模板进行渲染, ...

  7. 用yield写协程实现生产者消费者

    思路: yield可以使得函数阻塞,next,和send可以解阻塞,实现数据不竞争的生产者消费者模式 代码: import random #随机数,模拟生产者的制造物 def eat(): #消费者 ...

  8. Dev-C++安装第三方库boost

    Dev-C++安装第三方库boost  转 https://www.jianshu.com/p/111571e4d6f5?utm_source=oschina-app 之前鉴于codeblocks界面 ...

  9. HDU 4768 Flyer【二分】||【异或】

    <题目链接> <转载于  >>> > 题目链接: n个社团派发传单,有a,b,c三个参数,派发的规则是,派发给序号为a,a+c....a+k*c,序号要求是小 ...

  10. F - Tmutarakan Exams URAL - 1091 -莫比乌斯函数-容斥 or DP计数

    F - Tmutarakan Exams 题意 : 从 < = S 的 数 中 选 出 K 个 不 同 的 数 并 且 gcd > 1 .求方案数. 思路 :记 录 一 下 每 个 数 的 ...