大部分网站或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 width: 100%;
3 height: 200px;
4 overflow: hidden;
5 position: absolute;
6 }
7 .wrapper ul{
8 width: 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 width: 100%;
19 height:200px;
20 }
21 .wrapper .dots{
22 position: absolute;
23 right: 5px;
24 top:180px;
25 }
26 .wrapper .dots span{
27 width: 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 width: 100%;
3 height: 140px;
4 margin: 0 auto;
5 position: relative;
6 overflow: hidden;
7 }
8 .focus .hd {
9 width: 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 width: 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 width: 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 width: 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 width: 100%;
22 position: relative;
23 }
24
25 #slider{
26 max-width: 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 width: 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>
时间： 2024-08-08 20:53:47