1、一直來說輪播圖都是困擾剛進業内小白的一大難點，因為我們不僅需要自己作出一個比較完美的運動架構（雖然網上一抓一大把，但是哪有比自己做出來實作的有成就感，不是嗎？^_^），還必須需要非常關鍵性的把握住輪播的原理，這樣才能把一個輪播圖完美的呈現出來。
2、廢話不多說，請看下面代碼
1 //首先我們必須都明确，一個好的運動架構那必須是能夠同時承載兩種或多種以上需求的，是以我們應該避免單運動架構通過行内樣式的局限性，就需要我們知道怎麼去擷取非行間樣式
2 function getStyle(obj,attr){
3 if(obj.currentStyle){
4 return obj.currentStyle[attr];
5 }else{
6 return getComputedStyle(obj,false)[attr]
7 }
8 }
9 //以上我們用函數去封裝一個擷取非行間樣式的方法友善我們以後使用
10
11 //開始封裝運動架構
12 function move(obj,json,fn){
13 clearInterval(obj.timer)
14 obj.timer =setInterval(function(){
15 var bStop = true;
16 for(var attr in json){
17 var initialVal = 0;
18 if(attr == "opacity"){
19 initialVal = parseInt(parseFloat(getStyle(obj,attr))*100);
20 }else{
21 initialVal = parseInt(getStyle(obj,attr));
22 }
23 var speed = (json[attr]-initialVal)/8;
24 speed = speed>0?Math.ceil(speed):Math.floor(speed);
25 if(initialVal != json[attr]){
26 bStop = false;
27 }
28 if(attr == "opacity"){
29 obj.style.opacity = (initialVal+speed)/100;
30 obj.style.filter = "alpha(opacity:"+(initialVal+speed)+")";
31 }else{
32 obj.style[attr] = initialVal+speed+"px";
33 }
34 if(bStop){
35 clearInterval(obj.timer);
36 fn && fn();
37 }
38 }
39 },30)
40 }
41 //上面一個運動架構就做好了,現在隻需要我們調用即可,當然這種類型的架構還不是最完美的,有些功能還無法實作,是以我上面一直說比較完美,但這已經足夠用啦... 第二步: 輪播圖
1 <!--首先我們來寫一個簡單的html和css-->
2 <!DOCTYPE html>
3 <html lang="en">
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
7 <title>Document</title>
8 <style type="text/css">
9 *{padding: 0;margin: 0}
10 #banner{
11 width: 800px;
12 height:400px;
13 position: relative;
14 margin: 50px auto;
15 overflow: hidden;
16 }
17 #banner>ul{
18 position: absolute;
19 }
20 #banner>ul>li{
21 float: left;
22 list-style: none;
23 }
24 #banner>ul>li>img{
25 width:800px;
26 height: 400px;
27 border-radius: 15px;
28 }
29
30 #cut>a{
31 width: 80px;
32 height: 40px;
33 background:rgba(228,23,221,0.5);
34 ;border-radius: 10px;
35 text-decoration: none;
36 text-align: center;
37 font-weight: bold;
38 font-size: 30px;
39 color: pink;
40 position: absolute;
41 top:180px;
42 display: block;
43 line-height: 40px;
44 }
45 #cut>a:nth-child(2){
46 right:0;
47 }
48
49 #btn{
50 position: absolute;
51 top: 350px;
52 left: 350px;
53 }
54 #btn>a{
55 width: 20px;
56 height: 20px;
57 border-radius: 50%;
58 background:yellowgreen;
59 margin-right:6px;
60 float: left;
61 }
62 #btn>.active{background:yellow;}
63 </style>
64 </head>
65 <body>
66 <div id="banner">
67 <ul>
68 <li><img src="images/1.jpg"></li>
69 <li><img src="images/2.jpg"></li>
70 <li><img src="images/3.jpg"></li>
71 <li><img src="images/4.jpg"></li>
72 <li><img src="images/5.jpg"></li>
73 </ul>
74 <div id="cut">
75 <a href="##"><</a>
76 <a href="##">></a>
77 </div>
78 <div id="btn">
79 <a href="##" class="active"></a>
80 <a href="##"></a>
81 <a href="##"></a>
82 <a href="##"></a>
83 <a href="##"></a>
84 </div>
85 </div>
86 </body>
87 </html>
88 <!--上面我的一個簡單的布局，我就不多說了，下面請看我們的關鍵輪播圖吧--> 無縫輪播圖---> 當我們拿到需求時，我們會要立馬想到無縫輪播是一種圖檔從左至右的滑動式切換，那肯定是通過切換ul（按我上述的HTML來說）的left值進而達到效果的，請看下面代碼
1 var oBan =document.getElementById("banner");
2 var oli =oBan.getElementsByTagName("li");
3 var oul= oBan.getElementsByTagName("ul")[0];
4 var index = 0;
5 var timer = null;
6
7 //想要實作無縫輪播，關鍵就是使用一種偷梁換柱的障眼法去掩蓋使用者的視覺差
8 var li =oli[0].cloneNode(true);
9 oul.appendChild(li);
10
11 //為了友善以後的代碼維護
12 var iw =oli[0].offsetWidth;
13 oul.style.width =iw*oli.length+"px";
14
15 //輪播原理
16 function cutImg(){
17 move(oul,{left:-index*iw});
18 //當圖檔切換時，需要下面的小店同步進行切換
19 for(var i = 0;i<oBtn.length;i++){
20 oBtn[i].className = "" ;
21 }
22 oBtn[index>oBtn.length-1?0:index].className = "active";
23 }
24
25 //輪播的自動播放
26 function autoP(){
27 //這一步的目的在于當圖檔處于最後一張圖時，我們怎麼通過一個障眼法使圖檔變成我們想要的下一張圖
28 timer=setInterval(function(){
29 if(index == oli.length-1){
30 index = 1;
31 oul.style.left = 0;
32 }else{
33 index++
34 }
35 cutImg()
36 },3000)
37 }
38 autoP()
39
40 //當我們滑鼠移上時，輪播停止，滑鼠移開輪播繼續
41 oBan.onmouseover = function(){
42 clearInterval(timer);
43 }
44 oBan.onmouseout = function(){
45 autoP();
46 }
47
48 // 輪播圖中的點選小點圖檔切換
49 var oBtn = document.getElementById("btn").getElementsByTagName("a");
50 for(var i = 0;i<oBtn.length;i++){
51 oBtn[i].onclick = function(){
52 oBtn[i].iNow = i;
53 for(var j = 0;j<oBtn.length;j++){
54 oBtn[j].className = "";
55 }
56 this.className ="active" ;
57 move(oul,{left:-this.iNow*iw})
58 }
59 }
60
61 // 輪播圖中左右切換按鈕切換
62 var oCut =document.getElementById("cut").getElementsByTagName("a");
63 //點選右邊按鈕切換到第一張圖時，我們下一步想要得到的倒數第二張圖
64 oCut[1].onclick = function(){
65 if(index == oli.length-1){
66 index = 1;
67 oul.style.left = 0;
68 }else{
69 index++
70 }
71 cutImg()
72 }
73
74
75 oCut[0].onclick = function(){
76 if(index == 0){
77 index = oli.length -2;
78 oul.style.left = -(oli.length-1)*iw;
79 }else{
80 index--;
81 }
82 cutImg()
83 }
84
85 //這樣一個無縫輪播圖就做好啦！！ 上面是我對輪播圖的一個基本構思和大緻架構，希望融合大家各位技術大牛們
的思想加以優化，謝謝大家。。。。