前端经典案例之轮播图

大部分网站或APP的首页差不多都运用到了轮播图，下边就探讨一下关于轮播图的集中解决方法，相关插件可自行去网站下载。

效果图：

方法一：

1.css样式代码：

 1 <style>
 2         div{
 3             width: 344px;
 4             height: 199px;
 5             overflow: hidden;
 6         }
 7         ul{
 8             width: 1042px;
 9         }
10         li{
11             display: inline-block;
12         }
13     </style>

2.html代码：

1  <div class="wrapper">
2         <ul>
3             <li><img src="07.gif"></li>
4             <li><img src="08.gif"></li>
5             <li><img src="09.gif"></li>
6         </ul>
7     </div>

3.js代码：

 1 <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
 2     <script>
 3 
 4         var imgWidth = $(".wrapper").width();//ul移动一次的距离
 5         var imgLength = $("ul li").length;//判断索引为最后一个时，重新置为0
 6         var index = 0;//索引
 7 
 8         function changeImg(direction){
 9             if(direction == "left"){
10                 index++;
11             }else{
12                 index--;
13             }
14             if(index == imgLength){
15                 index=0;
16             }else if(index == -1){
17                 index=imgLength-1;
18             }
19             $("ul").stop().animate({
20                 marginLeft:-index*imgWidth+"px",
21             },600)
22         }
23 
24         function autoMove(){
25             setInterval(function(){
26                 changeImg("left");
27 
28             },2000)
29         }
30         autoMove();
31     </script>

方法二：

效果图：

注释：该方法实现的轮播图是可循环的。

1.css代码：

 1 .wrapper{
 2      100%;
 3     height: 200px;
 4     overflow: hidden;
 5     position: absolute;
 6 }
 7 .wrapper ul{
 8      400%;
 9     height: 200px;
10     font-size: 0;
11     position: relative;
12 }
13 .wrapper ul li{
14     display: inline-block;
15 
16 }
17 .wrapper img{
18      100%;
19     height:200px;
20 }
21 .wrapper .dots{
22     position: absolute;
23     right: 5px;
24     top:180px;
25 }
26 .wrapper .dots span{
27      16px;
28     height: 16px;
29     display: inline-block;
30     background: #FFF;
31     opacity: .5;
32     border-radius: 50%;
33 }

2.HTML代码：

 1 <div class="wrapper">
 2         <ul>
 3             <li><img src="img/4-1.jpg"/></li>
 4             <li><img src="img/4-2.jpg"/></li>
 5             <li><img src="img/4-3.jpg"/></li>
 6             <li><img src="img/4-4.jpg"/></li>
 7         </ul>
 8         <div class="dots">
 9             <span></span>
10             <span></span>
11             <span></span>
12             <span></span>
13         </div>
14     </div>

3.js代码：

 1 <script src="js/zepto.js"></script>
 2     <script>
 3         var index = 1;
 4         var liLnegth = $("li").length;
 5         $(".dots span").eq(0).css("opacity","1");
 6         setInterval(function(){
 7             $("ul").css("left","0%");
 8             $("ul").animate({
 9                 left:-100+"%"
10             },1000)
11             $(".dots span").eq(index-1).css("opacity",".5");
12             $(".dots span").eq(index).css("opacity","1");
13             $("ul li").eq(0).remove().clone(true).appendTo($("ul"));
14             index ++;
15             if(index == liLnegth){index = 0}
16         },2000);
17     </script>

方法三：

借助touchSlide插件注释：该方法在移动端可以手动左右滑动，但是不可循环

1.css代码：

 1 .focus {
 2    100%;
 3   height: 140px;
 4   margin: 0 auto;
 5   position: relative;
 6   overflow: hidden;
 7 }
 8 .focus .hd {
 9    100%;
10   height: 11px;
11   position: absolute;
12   z-index: 1;
13   bottom: 5px;
14   text-align: center;
15 }
16 .focus .hd ul {
17   display: inline-block;
18   height: 5px;
19   padding: 3px 5px;
20   background-color: rgba(255, 255, 255, 0.7);
21   -webkit-border-radius: 5px;
22   -moz-border-radius: 5px;
23   border-radius: 5px;
24   font-size: 0;
25   vertical-align: top;
26 }
27 .focus .hd ul li {
28   display: inline-block;
29    5px;
30   height: 5px;
31   -webkit-border-radius: 5px;
32   -moz-border-radius: 5px;
33   border-radius: 5px;
34   background: #8C8C8C;
35   margin: 0 5px;
36   vertical-align: top;
37   overflow: hidden;
38 }
39 .focus .hd ul .on {
40   background: #FE6C9C;
41 }
42 .focus .bd {
43   position: relative;
44   z-index: 0;
45 }
46 .focus .bd li img {
47    100%;
48   height: 140px;
49 }
50 
51 /* 修改   */
52 .focus .hd { 
53   text-align: right;
54   bottom: 10px;
55 }
56 .focus .hd ul { 
57   background-color: transparent;
58 }
59 .focus .hd ul li {  
60    10px;
61   height: 10px;
62   -webkit-border-radius: 10px;
63   opacity: 0.6;
64 }
65 .focus .hd ul .on {
66   background: #fff;
67   opacity: 1;
68 }

注释：css代码部分有所修改

2.html代码：

 1 <div id="banner" class="focus">
 2                 <div class="hd">
 3                     <ul></ul>
 4                 </div>
 5                 <div class="bd">
 6                     <ul>
 7                             <li><a href="#"><img _src="img/商城banner.jpg"  /></a></li>
 8                             <li><a href="#"><img _src="img/商城banner.jpg" /></a></li>
 9                             <li><a href="#"><img _src="img/商城banner.jpg" /></a></li>
10                     </ul>
11                 </div>
12             </div>

3.js代码：

 1 <script type="text/javascript" src="js/zepto.js" ></script>
 2     <script type="text/javascript" src="js/TouchSlide.1.1.js" ></script>
 3     <script type="text/javascript">
 4                 TouchSlide({ 
 5                     slideCell:"#banner",
 6                     titCell:".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
 7                     mainCell:".bd ul", 
 8                     effect:"left", 
 9                     autoPlay:true,//自动播放
10                     autoPage:true, //自动分页
11                     switchLoad:"_src" //切换加载，真实图片路径为"_src" 
12                 });
13             </script>

方法四：

借助swipe插件

注释：和touchsilde插件的效果一样

1.css代码：

 1 <style type="text/css">
 2         .swipe{
 3             overflow: hidden;
 4             visibility: hidden;
 5             position: relative;
 6         }
 7         .swipe-wrap{
 8             overflow: hidden;
 9             position: relative;
10         }
11         .swipe-wrap > div{
12             float: left;
13             width: 100%;
14             position: relative;
15         }
16         .swipe-wrap > div img{
17             width: 100%;
18             height: 220px;
19         }
20     </style>

2.HTML代码：

 1 <div id="slider" class="swipe">
 2             <div class="swipe-wrap">
 3                 <div class="wrap">
 4                     <img src="img/3-1.jpg">
 5                 </div>
 6                 <div class="wrap">
 7                     <img src="img/3-2.jpg">
 8                 </div>
 9                 <div class="wrap">
10                     <img src="img/3-3.jpg">
11                 </div>
12             </div>
13         </div>

3.js代码：

 1 <script src="js/zepto.js"></script>
 2         <script src="js/swipe.js" type="text/javascript" charset="utf-8"></script>
 3         <script type="text/javascript">
 4             window.mySwipe=Swipe(document.getElementById('slider'),{
 5                 startSlide: 2,   
 6                 speed: 400,   
 7                 auto: 3000,   
 8                 continuous: true,   
 9                 disableScroll: false,   
10                 stopPropagation: false,   
11                 callback: function(index, elem) {},   
12                 transitionEnd: function(index, elem) {}
13             });
14         </script>

方法五：借助swipe插件注释：该方法可以自动循环播放

1.swipe.css代码：

 1 /*轮播*/
 2 .carousel{
 3   height:250px; 
 4   position: relative;
 5 }
 6 
 7 .carousel .swipe {
 8   overflow: hidden;
 9   visibility: hidden;
10   position: relative;
11   height: 100%;
12 }
13 
14 .carousel .swipe .swipe-wrap {
15   overflow: hidden;
16   position: relative;
17 }
18 
19 .carousel .swipe .swipe-wrap > figure {
20   float: left;
21    100%;
22   position: relative;
23 }
24 
25 #slider{
26   max- 650px;
27   /* 设置最大的宽度 */
28   margin: 0px auto;
29   /* 居中对齐 */
30 }
31 figure {
32   margin: 0;
33   /* 对齐，四周宽度都为0，在轮播的时候，以整张图片进行移动 */
34 }
35 .face{
36   height: 250px;/*设置图片高度*/
37 }
38 
39 /*底边小点的设置*/
40 .carousel nav #position {
41   text-align: center;
42   list-style: none;
43   margin: 0;
44   padding: 0;
45   position: absolute;
46   bottom: 5px;
47 }
48 
49 .carousel nav #position li {
50   display: inline-block;
51    10px;
52   height: 10px;
53   border-radius: 10px;
54   background: #141414;
55   box-shadow: inset 0 1px 3px black, 0 0 1px 1px #202020;
56   margin: 0 2px;
57   cursor: pointer
58 }
59 
60 .carousel nav #position li.on {
61   box-shadow: inset 0 1px 3px -1px #28b4ea, 0 1px 2px rgba(0, 0, 0, .5);
62   background-color: #1293dc;
63   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1293dc), color-stop(100%, #0f6297));
64   background-image: -webkit-linear-gradient(top, #1293dc, #0f6297);
65   background-image: -moz-linear-gradient(top, #1293dc, #0f6297);
66   background-image: -ms-linear-gradient(top, #1293dc, #0f6297);
67   background-image: -o-linear-gradient(top, #1293dc, #0f6297);
68   background-image: linear-gradient(top, #1293dc, #0f6297)
69 }

2.html代码：

 1 <div class="carousel">
 2       <div id="slider" class="swipe" style="visibility:visible;">
 3         <div class="swipe-wrap">
 4           <figure>
 5             <div class="face faceInner">
 6               <img src="img/4-1.jpg" width="100%" height="100%" />
 7             </div>
 8           </figure>
 9           <figure>
10             <div class="face faceInner">
11               <img src="img/4-2.jpg" width="100%" height="100%" />
12             </div>
13           </figure>
14           <figure>
15             <div class="face faceInner">
16               <img src="img/4-3.jpg" width="100%" height="100%" />
17             </div>
18           </figure>
19           <figure>
20             <div class="face faceInner">
21               <img src="img/4-4.jpg" width="100%" height="100%" />
22             </div>
23           </figure>
24         </div>
25       </div>
26       <nav>
27         <ul id="position">
28           <li class="on"></li>
29           <li></li>
30           <li></li>
31           <li></li>
32         </ul>
33       </nav>
34     </div>

3.js代码：

 1 <script src="js/swipe.js" type="text/javascript" charset="utf-8"></script>
 2     <script type="text/javascript">
 3       var slider = Swipe(document.getElementById('slider'), {
 4         auto: 3000,//轮播时间
 5         continuous: true,//是否连续播放
 6         disableScroll: false,
 7         callback: function(pos) {
 8           var i = bullets.length;
 9           while (i--) {
10             bullets[i].className = ' ';
11           }
12           bullets[pos].className = 'on';
13         }
14       });
15       var bullets = document.getElementById('position').getElementsByTagName('li');
16     </script>