Jquery轮播图制作

我的个人主页：http://www.zcool.com.cn/u/14498773

前端Jquery轮播图制作
前言：网站是否让人感觉高端大气上档次，最重要的就是轮播图，所以做好轮播图尤为重要！以前要做图片轮播效果的时候，总是在网上找固定的模板复制粘贴进去，但是网上找来的资料总是有很多冗余的东西，而且不够精简，今天我就把几种主流的轮播图的做法和大家分享一下。备注：本人刚接触前端这一块，这是第一篇个人博客，希望大家多多支持，有问题可以与我沟通交流，谢谢！

一、分类

1. 无缝滚动
2. 简单的呼吸轮播
3. 全屏呼吸轮播
4. 蒙太奇轮播
5. 无缝滑动轮播

二、准备工作

• 布局（结构）：页面HTML的结构搭建没有硬性要求，只要遵循W3C标准，层级关系规范就行，我一般喜欢使用UL+LI来布局；
• 样式（CSS）：需要对CSS的一些基本知识清楚，至少需要什么静态效果你要能先实现出来吧；

• 行为（Jquery）：对于jquery的语法结构需要清楚，以及它的一些常用方法（这里会用到clone()方法，这是实现无缝轮播的关键所在）的使用，还需要知道基本的动画（fadeIn、fadeOut…）。

  需要引入JQ的包——

三、具体实现

1. 无缝滚动
   效果图
   

   说明
   clone(true)是实现无缝的关键，由于当前demo中一屏可以容纳下两张图片，所以需要用JQ选择器中的$(‘.list li:lt(2)’)来筛选出最前面的两张，将这两张克隆出来，然后使用append方法追加到节点末尾，当轮播图切到最后一张时，继续走下去会展现的是追加到末尾的两张图片，这样用户就以为回到了最开始的那两张，此时只需要改变margin-left值回到0就可以了。

   代码

   <div class="box">
       <ul class="list">
           <li><a href="javascript:;"><img src="images/luoLi/01.jpg" height="200" width="300" />a>li>
           <li><a href="javascript:;"><img src="images/luoLi/02.jpg" height="200" width="300" />a>li>
           <li><a href="javascript:;"><img src="images/luoLi/03.jpg" height="200" width="300" />a>li>
           <li><a href="javascript:;"><img src="images/luoLi/04.jpg" height="200" width="300" />a>li>
           
       ul>
   div>
   <div class="btnBox">
       <a href="javascript:;" class="leftBtn"> << a>　　
       <a href="javascript:;" class="rightBtn"> >> a>
   div>

   <style type="text/css">
       .box{width: 600px; height: 200px; border: 1px solid #000; margin: 100px auto 0;
           overflow: hidden;}
       .list{width: 1800px; height: 200px; position: relative; top: 0; left: 0; background: #000;}
       .list li{width: 300px; height: 200px; float: left;}
       .btnBox{width: 600px; height: 45px; line-height: 45px; text-align: center;
           margin: 0 auto;}
       .btnBox a{font-size:18px; text-decoration: none;color:#000;}
   style>

   //自定义一个变量，用来模拟list的left值
   var myLeft=0;
   //用JQ克隆前两个LI
   var myaLi=$('.list li:lt(2)').clone(true);
   //将克隆出来的节点插入到list的最末尾
   $('.list').append(myaLi);
   var timer;
   //定义一个方向变量，用来帮助我们知道当前UL的运动方向
   var fangXiang='left';
   
   //往左走的功能
   var leftFn=function(){
       //调用左功能，将方向和该功能实现的方向保持一致
       fangXiang='left';
       //每次将left进行减减
       myLeft=myLeft-3;
       //如果myLeft<=-1200，就代表一个轮回走完了；
       //就要让轮回回到最开始的地方：0
       if(myLeft<=-1200){
           myLeft=0;
       }
       //将这个不断改变的myLeft变量和list身上的left值进行同步
       $('.list').css('left',myLeft);
   }
   //往右走的功能
   var rightFn=function(){
       //调用右功能，将方向和该功能实现的方向保持一致
       fangXiang='right';
       //每次将left进行加加，后面的加值或者减值推荐保持一致
       myLeft=myLeft+3;
       //刚一开始就露出了马脚，所以需要回到轮回最末尾
       //left值是-1200
       if(myLeft>0){
           myLeft=-1200;
       }
       //将这个不断改变的myLeft变量和list身上的left值进行同步
       $('.list').css('left',myLeft);
   }
   
   //默认是往左走
   timer=setInterval(leftFn,30);
   
   //当单击右按钮时，让盒子往右走
   $('.rightBtn').click(function(event) {
       clearInterval(timer);
       //先清除旧的定时器，再开启一个新定时器，这个定时器调用rightFn功能
       timer=setInterval(rightFn, 30);
   });
   
   //当单击左按钮时，让盒子往左走
   $('.leftBtn').click(function(event) {
       clearInterval(timer);
       //先清除旧的定时器，再开启一个新定时器，这个定时器调用leftFn功能
       timer=setInterval(leftFn, 30);
   });
   
   $('.box').hover(function() {
       //鼠标移上box身上时，让定时器停止
       clearInterval(timer);
   }, function() {
       clearInterval(timer);
       //当鼠标离开时，进行方向的判断，如果当前这个方向是left，重启时需要调用leftFn；
       //如果当前这个方向是right，重启时需要调用rightFn
       if(fangXiang=='left'){
           timer=setInterval(leftFn, 30);
       }else{
           timer=setInterval(rightFn, 30);
       }
   
   });
   
   $('.list li').hover(function() {
       //让当前这个LI的小伙伴们的透明度降低
       $(this).siblings().stop().fadeTo(500,.4);
   }, function() {
       //离开时，将所有LI的透明度还原
       $('.list li').stop().fadeTo(500,1);
   });

2. 简单的呼吸轮播
   效果图
   

   说明
   这个demo中JQ的书写没有什么特殊的地方，要注意的是CSS样式，该案例中布局采用的是UL>LI，每个LI都是position:absolute;采用绝对定位，叠在一个地方，默认状态下LI写了display:none;让他们都隐藏，只有第一张让它display:block；显示，然后用fadeIn和fadeOut来控制图片的淡入或淡出显示。

   代码

   <div class="banner">
       <ul class="imgList">
           <li style="display:block;"><a href="javascript:;"><img src="images/xiaomi/1.jpg" height="420" width="992" />a>li>
           <li><a href="javascript:;"><img src="images/xiaomi/2.jpg" height="420" width="992" />a>li>
           <li><a href="javascript:;"><img src="images/xiaomi/3.jpg" height="420" width="992" />a>li>
           <li><a href="javascript:;"><img src="images/xiaomi/4.jpg" height="420" width="992" />a>li>
           <li><a href="javascript:;"><img src="images/xiaomi/5.jpg" height="420" width="992" />a>li>
       ul>
       <ol class="btnList">
           <li class="current">1li>
           <li>2li>
           <li>3li>
           <li>4li>
           <li style="margin-right:0;">5li>
       ol>
       <div class="leftBtn">div>
       <div class="rightBtn">div>
   div>

   <style type="text/css">
       body{font-family: '宋体';}
       .banner{width: 992px; height: 420px; margin: 100px auto 0; position: relative;}
       .imgList{width: 992px; height: 420px; position: relative;}
       .imgList li{width: 992px; height: 420px; position: absolute; left: 0; top: 0; display: none;}
       .btnList{position: absolute; right: 10px; bottom: 10px;}
       .btnList li{width: 30px; height: 20px; color: #fff; background: rgba(0,0,0,0.3); margin-right: 10px;
           float: left; text-align: center; line-height:20px; border: 1px solid #CCC; cursor: pointer;} 
       .btnList li.current{background: rgba(0,0,0,0.65);}
       .leftBtn,.rightBtn{width: 41px; height: 69px; position: absolute; top: 50%; margin-top: -35px;
       background: url(images/xiaomi/left.gif) no-repeat center center rgba(0,0,0,.65); display: none;
       cursor: pointer;}
       .leftBtn{left: 0; }
       .rightBtn{right: 0; background-image: url(images/xiaomi/right.gif);}
       .banner:hover .leftBtn,.banner:hover .rightBtn{display: block;}
   style>

   //定义一个变量，用来模拟不断改变的下标 
       var num=0;
       var nextFn=function(){
           //让上一张淡出
           $('.imgList li').eq(num).stop().fadeOut(1000);
           num++;
           if(num>4){
               num=0;
           }
           //让下一个角标增加current...
           $('.btnList li').eq(num).addClass('current').siblings('li').removeClass('current');
           //让下一张淡入
           $('.imgList li').eq(num).stop().fadeIn(1000);
       }
   
       var prevFn=function(){
           //让上一张淡出
           $('.imgList li').eq(num).stop().fadeOut(1000);
           num--;
           if(num<0){
               num=4;
           }
           //让上一个角标增加current...
           $('.btnList li').eq(num).addClass('current').siblings('li').removeClass('current');
           //让下一张淡入
           $('.imgList li').eq(num).stop().fadeIn(1000);
       }
   
       $('.rightBtn').click(nextFn);
       $('.leftBtn').click(prevFn);
       $('.btnList li').click(function(event) {
           //num未修改前代表上一张
           $('.imgList li').eq(num).stop().fadeOut(1000);
           num=$(this).index();
           //num修改后代表下一张
           //让下一个角标增加current...
           $('.btnList li').eq(num).addClass('current').siblings('li').removeClass('current');
           //让下一张淡入
           $('.imgList li').eq(num).stop().fadeIn(1000);
       });

3. 全屏呼吸轮播
   效果图
   

   说明
   全屏呼吸轮播的制作原理和上面的简易呼吸轮播差不多，但是这种轮播图制作时需要特别注意的地方是设计图制作，大图设计时尽量把内容放在版心内，让旁边的区域留白，尽量用纯色，只需要将盒子居中，设置并改变外层大盒子的background-color背景颜色即可。

   代码

   <div class="box">
       <ul class="imgList">
           <li style="display:block;background-color:#020612;background-image:url(images/yuHua/1.jpg);">
               <a href="javascript:;">a>
           li>
           <li style="background-image:url(images/yuHua/2.jpg);background-color:#083B74">
               <a href="javascript:;">a>
           li>
           <li style="background-image:url(images/yuHua/3.jpg); background-color:#948790">
               <a href="javascript:;">a>
           li>
           <li style="background-image:url(images/yuHua/4.jpg); background-color:#000F22">
               <a href="javascript:;">a>
           li>
       ul>
       <ol class="btnList">
           <li class="current">li>
           <li>li>
           <li>li>
           <li style="margin-right:0;">li>
       ol>
       <div class="leftBtn">div>
       <div class="rightBtn">div>
   div>

   .box{width: 100%; height: 435px; position: relative;}
   .imgList{height: 435px; position: relative;}
   .imgList li{position: absolute; height: 435px; left: 0; top: 0; display: none; width: 100%;
   background-position: center top;
   background-repeat: no-repeat;}
   .imgList li a{display: block; width: 100%; height: 100%;}
   .btnList{width: 120px; height: 12px; position: absolute; left: 50%; margin-left: -60px;
   bottom: 15px; }
   .btnList li{width: 12px; height: 12px; background: url(images/yuHua/sprite_banner.png) -17px 0;
   float: left; margin-right: 24px; cursor: pointer;}
   .btnList li.current{background-position: 0 0;}
   .leftBtn,.rightBtn{width: 35px; height: 71px; position: absolute; top: 50%; margin-top: -35px;
   background: url(images/1920/icons.png) 0 0; cursor: pointer;}
   .leftBtn{left: 50%; margin-left: -600px;}
   .rightBtn{left: 50%; background-position: -90px 0; margin-left: 600px;}

   var num=0;
   var timer;
   var nextFn=function(){
       //没加之前代表上一张，上一张淡出
       $('.imgList li').eq(num).stop().fadeOut(1500);
       num++;
       if(num>3){
           num=0;
       }
       //更改完以后代表下一张，下一张淡入
       $('.imgList li').eq(num).stop().fadeIn(1500);
       $('.btnList li').eq(num).addClass('current').siblings('li').removeClass('current');
   }
   var prevFn=function(){
       //没加之前代表上一张，上一张淡出
       $('.imgList li').eq(num).stop().fadeOut(1500);
       num--;
       if(num<0){
           num=3
       }
       //更改完以后代表下一张，下一张淡入
       $('.imgList li').eq(num).stop().fadeIn(1500);
       $('.btnList li').eq(num).addClass('current').siblings('li').removeClass('current');
   }   
   //左右按钮点击
   $('.rightBtn').click(nextFn);
   $('.leftBtn').click(prevFn);   
   //小点点击
   $('.btnList li').click(function(event) {           
       var i=$(this).index();
       //现在这个全局变量num就代表上一张
       //没加之前代表上一张，上一张淡出
       $('.imgList li').eq(num).stop().fadeOut(1500);
       //再让序号和num进行同步
       num=i;
       //重新赋值以后，num就代表下一张
       //更改完以后代表下一张，下一张淡入
       $('.imgList li').eq(num).stop().fadeIn(1500);
       $('.btnList li').eq(num).addClass('current').siblings('li').removeClass('current');
   }); 
   //自动走
   timer=setInterval(nextFn, 2000);
   //鼠标悬停时...
   $('.box').hover(function() {
       clearInterval(timer);
   }, function() {
       clearInterval(timer);
       timer=setInterval(nextFn, 2000);
   });

4. 蒙太奇轮播
   效果图
   

   说明
   听到蒙太奇轮播这个名字，还以为是有多么牛逼呢，原来它的实现原理和上面的差不多，只不过在之前的基础上面加了一层黑色透明的遮罩层，控制它进出的顺序，实现图片切换时有一层过渡的效果，只能说用户体验更好一点。
   何为“蒙太奇”，蒙太奇(montage)在法语是“剪接”的意思，但到了俄国它被发展成一种电影中镜头组合的理论。在这里就是蒙了一层遮罩的意思。

   代码

    <div class="box">
       <div class="fadeCover">div>
       <ul class="imgList">
           <li style="display:block; background-image:url(images/yuHua/1.jpg); background-color:#020612;">
               <a href="javascript:;">a>
           li>
           <li style="background-image:url(images/yuHua/2.jpg); background-color:#083B74">
               <a href="javascript:;">a>
           li>
           <li style="background-image:url(images/yuHua/3.jpg); background-color:#948790">
               <a href="javascript:;">a>
           li>
           <li style="background-image:url(images/yuHua/4.jpg); background-color:#000F22">
               <a href="javascript:;">a>
           li>
       ul>
       <ol class="btnList">
           <li class="current">li>
           <li>li>
           <li>li>
           <li style="margin-right:0;">li>
       ol>
       <div class="leftBtn">div>
       <div class="rightBtn">div>
   div>

   .box{width: 100%; height: 435px; position: relative;}
   .fadeCover{position: absolute; left: 0; top: 0; z-index: 101; background: #000; display: none;
   width: 100%; height: 100%;}
   .imgList{height: 435px; position: relative;}
   .imgList li{position: absolute; height: 435px; left: 0; top: 0; display: none; width: 100%;
   z-index: 100;
   background-position: center top;
   background-repeat: no-repeat;}
   .imgList li a{display: block; width: 100%; height: 100%;}
   .btnList{width: 120px; height: 12px; position: absolute; left: 50%; margin-left: -60px;
   bottom: 15px; z-index: 102;}
   .btnList li{width: 12px; height: 12px; background: url(images/yuHua/sprite_banner.png) -17px 0;
   float: left; margin-right: 24px; cursor: pointer;}
   .btnList li.current{background-position: 0 0;}
   .leftBtn,.rightBtn{width: 35px; height: 71px; position: absolute; top: 50%; margin-top: -35px;
   background: url(images/1920/icons.png) 0 0; cursor: pointer; z-index: 102;}
   .leftBtn{left: 50%; margin-left: -600px;}
   .rightBtn{left: 50%; background-position: -90px 0; margin-left: 600px;}

   var num=0;
       var timer;
       var sportFn=function(){
           $('.btnList li').eq(num).addClass('current').siblings('li').removeClass('current');
           $('.fadeCover').stop().fadeIn(200,function(){
               $(this).stop().fadeOut(300);
               $('.imgList li').eq(num).show().siblings('li').hide();
           });
       }
       var nextFn=function(){
           num++;
           if(num>3){
               num=0;
           }
           sportFn();
       }
       var prevFn=function(){  
           num--;
           if(num<0){
               num=3
           }
           sportFn();
       }
       //左右按钮点击
       $('.rightBtn').click(nextFn);
       $('.leftBtn').click(prevFn);
       //小点点击
       $('.btnList li').click(function(event) {
           var i=$(this).index();
           num=i;
           sportFn();
       });
       //自动走
       timer=setInterval(nextFn, 2000);
       //鼠标悬停时...
       $('.box').hover(function() {
           clearInterval(timer);
       }, function() {
           clearInterval(timer);
           timer=setInterval(nextFn, 2000);
       });

5. 无缝滑动轮播
   效果图
   

   说明
   无缝的关键在上面已经说过了，还是clone(true)方法，其中true一定不要忘记，一般的大图都是全屏或者一次切换一张图片，只需要让margin-left每次走一张图片的宽度就好，除了图片上面的控制，还有圆形小按钮需要和图片滚动对应起来，另外的左右箭头按钮切换图片就很简单了。

   代码

   <div class="con">
       <div class="conIn">
           <ul class="imgList">
               <li><img src="images/01.jpg" width="400" height="307" />li>
               <li><img src="images/02.jpg" width="400" height="307" />li>
               <li><img src="images/03.jpg" width="400" height="307" />li>
               <li><img src="images/04.jpg" width="400" height="307" />li>
           ul>
       div>
       <ol class="btnList">
           <li class="current">li>
           <li>li>
           <li>li>
           <li style="margin-right:0;">li>
       ol>
       <a href="javascript:;" class="left">a>
       <a href="javascript:;" class="right">a>
   div>

    *{ margin: 0; padding: 0; list-style: none; }
   .con { width: 400px; height: 307px; border:5px solid #ccc; margin: 100px auto; position: relative; }
   .conIn{height: 307px; overflow: hidden;  position: relative; }
   .imgList{ width: 2000px; position:absolute; left: 0; top: 0;}
   .imgList li{ float: left; width: 400px; height: 307px; }
   .left,.right { width: 52px; height: 52px; position: absolute; top: 50%; margin: -26px 0 0 0; background: url(images/arr.png) no-repeat 0 0; }
   .left { left: -21px; }
   .right { background-position: -52px 0; right: -21px; }
   .btnList{  width: 67px; height: 13px; position: absolute; left: 50%; bottom: -25px; margin-left:-33px;}
   .btnList li { width: 13px; height: 13px; background:url(images/00.png) no-repeat 0 0; float:left; margin: 0 5px 0 0; cursor:pointer; }
   .btnList li.current { background-position: 0 -26px; }

   //定义一个变量，用来模拟那个不断在改变点的序号
           var dianKey=0;
           //定义一个变量，用来模拟那个不断在改变图片的序号
           var imgKey=0;
           var timer;
   
           //实现无缝的关键就是：请临时工
           var firstLi=$('.imgList li:first').clone(true);
           $('.imgList').append(firstLi);
   
           var nextFn=function(){
   
               //需要点的不断改变的序号：0 1 2 3
               dianKey++;
               if(dianKey>3){
                   dianKey=0;
               }
   
               //让下一张的小点具备current...
               $('.btnList li').eq(dianKey).addClass('current').siblings('li').removeClass('current');
   
               //需要图片不断改变的序号：0 1 2 3 4
               imgKey++;
               if(imgKey>4){
                   //当你在临时工身上时，用户以为他看到的是第一张，但实际上它是临时工；
                   //用户希望看到的下一张是第1张
                   imgKey=1;
                   //这里一瞬间需要让盒子回到0的位置
                   //因为我需要实现每次都走400PX，所以一瞬间回到0，从0到-400过渡
                   $('.imgList').css('left', 0);
   
               }
   
   
               //移动公式：imgKey*-400
               var s=imgKey*-400;
               $('.imgList').stop().animate({'left':s}, 500);
   
           }
   
           var prevFn=function(){
   
               dianKey--;
               if(dianKey<0){
                   dianKey=3;
               }
               //让上一张的小点具备current...
               $('.btnList li').eq(dianKey).addClass('current').siblings('li').removeClass('current');
   
   
               imgKey--;
               if(imgKey<0){
                   //用户希望看到的上一张是第3张（临时工前面的那一张）
                   imgKey=3;
                   //为了实现无缝，也就是每次都走400PX
                   //这里一瞬间需要让盒子回到-1600PX的位置
                   //从-1600PX向-1200PX进行过渡 
                   $('.imgList').css('left', -1600);
               }
   
               //移动公式：imgKey*-400
               var s=imgKey*-400;
               $('.imgList').stop().animate({'left':s}, 500);
   
           }
   
           $('.right').click(nextFn);
           $('.left').click(prevFn);
   
           //给单击小点绑定事件
           $('.btnList li').click(function(event) {
   
               //先获取到序号
               var i=$(this).index();
               var s=i*-400;
               //让小点走走
               $('.btnList li').eq(i).addClass('current').siblings('li').removeClass('current');
               //让图片走走
               $('.imgList').stop().animate({'left':s}, 500);
               //为了让当前这个序号能够影响到上一张和下一张，
               //还有一个很重要的步骤：序号同步（两个全局变量都需要同步）
               imgKey=i;
               dianKey=i;
   
           });
   
           //使用定时器实现自动走
           timer=setInterval(nextFn, 1500);
   
           //鼠标悬停时，停止定时器
           $('.con').hover(function() {
               clearInterval(timer);
           }, function() {
               clearInterval(timer);
               timer=setInterval(nextFn, 1500);
           });

总结：总结了这几种轮播图的制作方法，其实总体上都差不多，就是有些细微的地方做了一些调整和变换，资料整合在一起方便查阅，希望能帮助到更多的人。这是第一篇总结性的东西，以后希望把这个好习惯延续下去，总结+复习，慢慢进步。加油！