js實現輪播圖動畫(更新"旋轉木馬")

時間 2019-11-09

標籤實現動畫更新旋轉木馬欄目 JavaScript 简体版

原文原文鏈接

在網頁瀏覽中，能夠看到輪播圖是無處不在的，這是一個前端工程最基本的技巧。首先看看幾個網頁的呈現的效果。javascript

QQ音樂：css

網易雲音樂：html

天貓：前端

接下來將從簡到難總結幾種實現輪播圖的方法。java

　　一、樣式一：鼠標滑入滑出實現圖片切換json

　　當鼠標滑入到小圓點上時，顯示當前對應的圖片，鼠標移出時回到默認的圖片。若是點擊了小圓點，顯示當前的圖片，移出時仍不改變顯示。數組

　　html+css設置app

 1 <!-- 輪播圖片 -->
 2 <div class="slider">
 3     <!-- 小圓點 -->
 4     <div class="control">
 5         <!-- 根據圖片數量添加小圓點 -->
 6         <ul>
 7             
 8         </ul>
 9     </div>
10     <!-- 圖片顯示 -->
11     <div class="content">
12         <img src="./22.jpg" alt="" class="active" />
13         <img src="./66.jpg" alt="" />
14         <img src="./33.jpg" alt="" />
15         <img src="./44.jpg" alt="" />
16         <img src="./55.jpg" alt="" />
17     </div>
18 </div>

 1 /*css樣式*/
 2 *{margin: 0;padding: 0;}
 3 
 4 .slider{
 5     margin: 100px auto;
 6     width: 640px;
 7     height: 400px;
 8     position: relative;
 9 }
10 .slider .control{
11     position: absolute;
12     width: 640px;
13     height: 20px;
14     left: 0;
15     bottom: 30px;
16 }.slider .control ul{
17     list-style: none;
18     width: 150px;
19     margin: 0 auto;
20 }.slider .control li{
21     width: 20px;
22     height: 20px;
23     margin: 0 5px;
24     float: left;
25     border-radius: 50%;
26     background-color: #fff;
27     cursor: pointer;
28 }
29 .slider .control li.active{
30     background-color: red;
31 }/*默認設置不顯示其餘圖片*/
32 .slider .content img{
33     width: 640px;
34     height: 400px;
35     display: none;
36 }
37 /*只顯示第一張圖片*/
38 .slider .content img.active{
39     display: block;
40 }

樣式展現效果：ide

javascript設置函數

 1 //定義一個改變圖片函數
 2 function changImage(i) {
 3     var index = i;
 4     var ul = document.getElementsByTagName("ul")[0];
 5     //獲取全部的images
 6     var images = document.getElementsByTagName("img"); //數組
 7     //獲取全部的li
 8     var lis = ul.getElementsByTagName("li");
 9     for(var j = 0; j < lis.length; j++){
10         var li = lis[j];
11          var img = images[j];
12          //清除li 和 img 默認的active (img的active表示顯示這個圖片)
13          li.className = '';
14          img.className = '';
15     }
16     //設置當前的active屬性
17     
18     lis[index].className = 'active';
19     images[index].className = 'active';
20 }
21         
22 window.onload = function () {
23     //根據圖片數改變小圓點數
24     //1得到圖片數
25     var content = document.getElementsByClassName("content")[0];
26     var images = content.getElementsByTagName("img"); //數組  全部圖片
27     //圖片數
28     var imageCount = images.length;
29     //根據圖片數建立小圓點數,添加到ul中
30     //遍歷圖片數
31     for(var i = 0; i < imageCount; i++){
32         //1建立小白點
33         var li = document.createElement("li")
34         li.index = i;
35         //3默認的第一個選中
36         if (i == 0) {
37             li.className += 'active';
38         }
39         //2添加到ul中
40         var control = document.getElementsByClassName("control")[0];
41         var ul = control.getElementsByTagName("ul")[0];
42         ul.appendChild(li)
43         var select = 0;
44         li.onclick = function(){
45             select = this.index;
46             changImage(this.index);
47         
48         li.onmousemove = function () {
49             changImage(this.index);
50         
51         li.onmouseout =function () {
52             changImage(select);
53         
54     
55         //4設置ul寬度 保證居中
56         ul.style.width = (imageCount*30)+ 'px';    
57     }

　　二、樣式二：實現圖片自動切換

　　展現時，圖片在頁面中自動切換。鼠標點擊小圓點，直接切換顯示當前圖片。

html+css設置（基本和上面同樣）

 1 <body>
 2 <div class="slider">
 3     <div class="control">
 4         <span class="current">1</span>
 5         <span>2</span>
 6         <span>3</span>
 7         <span>4</span>
 8         <span>5</span>
 9     </div>
10     <div class="content" id="imag-list">
11         <ul >
12             <li><img src="images/1.jpg" alt="" /></li>
13             <li><img src="images/5.jpg" alt="" /></li>
14             <li><img src="images/4.jpg" alt="" /></li>
15             <li><img src="images/3.jpg" alt="" /></li>
16             <li><img src="images/2.jpg" alt="" /></li>
17         </ul>
18     </div>
19 </div>
20 </body>

*{padding: 0;margin: 0;}
.slider{
    width: 800px;
    height: 500px;
    position: relative;
    overflow: hidden;
    margin: 30px auto;
}
.slider img{
    width: 800px;
    height: 500px;
}

.slider .content{
}
.slider .content ul{
    width: 10000px;
    list-style: none;
    position: absolute;
    left:0px;
}
.slider .content li{
    float: left;

.slider .control{
    position: absolute;
    width: 100%;    
    z-index: 10;
    bottom: 50px;
    left: 0;
    text-align: center;
}
.slider .control span{
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 14px;
    background-color: #fff;
    border-radius: 50%;
    cursor: pointer;
}
.slider .control span.current{
    background-color: red;
}

JavaScript設置

 1 //封裝移動函數
 2     function animate(element,target){
 3         clearInterval(element.animateTimer);
 4         var left = element.offsetLeft;
 5         var step = (target - left) / 10;
 6         element.animateTimer = setInterval(function(){
 7             left += step;
 8             element.style.left = left + 'px';
 9             if(Math.abs(target - left) <= Math.abs(step)){
10                 clearInterval(element.animateTimer);
11                 element.style.left = target + 'px';
12             }
13         },100);
14     }

15     window.onload =function(){
16         var ul = document.getElementsByTagName('ul')[0];
17         var spanArr = document.getElementsByTagName('span');
18         //4.最後一張顯示後，克隆第一張圖片繼續顯示第一張
19         ul.appendChild(ul.children[0].cloneNode(true));
20         var ulLeft = ul.offsetLeft;
21         console.log(ulLeft);
22         var ulIndex = 0;  //默認第一張圖片下標
23         // console.log(ulLeft);
24         //開啓
25         var autoPlayTimer = setInterval(function(){            
26             //4.2 從最後一張滾回到第一張(ulIndex == 5)以後  需重置回第一張狀態
27             if(ulIndex == 5){
28                 ulIndex = 0;
29                 ul.style.left = '0';
30                 ulLeft = 0;
31             }
32             ulLeft -= 800;
33             // console.log(ulLeft);
34             animate(ul, ulLeft);
35             ulIndex++;
36             for(var i = 0; i< spanArr.length; i++){
37                 spanArr[i].className = '';
38             }
39             //4.3改變頁面  第五張圖片結束後ulIndex是4 
40             //第六張圖片即第一張圖片的ulIndex是5  因此求ulIndex % 5恢復ulIndex爲0 
41             spanArr[ulIndex % 5].className = 'current';
42         },3000);
43         //第二大步  給小圓點span添加點擊事件
44         for(var i = 0; i< spanArr.length; i++){
45             var span = spanArr[i];
46             span.index = i;
47             span.onclick = function(){
48                 //實現點擊span後圖片移動
49                 var targetLeft = -800 * this.index; //0 - 4
50                 //點擊後自動滾動到 當前圓點對應的圖片的位置  即左移800*下標
51                 animate(ul, targetLeft);
52                 //記錄此時的ulLeft ulIndex 爲了繼續從當前點擊圖片向下一張圖片移動
53                 ulLeft = targetLeft;
54                 ulIndex = this.index;
55                 //切換當前span選中樣式
56                 for(var j = 0; j<spanArr.length; j++){
57                     spanArr[j].className = '';
58                 }
59                 this.className = 'current';
60             }
61         }
62     }

　　三、樣式三：實現帶有箭頭的錄播圖

　　展現時，圖片在頁面中自動切換，橫條隨之選中。點擊左箭頭，圖片向左滑動；點擊右箭頭，圖片向右滑動。鼠標點擊小圓點，直接切換顯示當前圖片。鼠標放入圖片中，中止圖片滑動，移開時繼續滑動。

　　html+css設置

 1 <body>
 2     <div class="box">
 3         <div class="content">
 4             <div><img src="img/1.jpg" alt="" /></div>
 5             <div><img src="img/2.jpg" alt="" /></div>
 6             <div><img src="img/3.jpg" alt="" /></div>
 7             <div><img src="img/4.jpg" alt="" /></div>
 8             <div><img src="img/5.jpg" alt="" /></div>
 9             <div><img src="img/6.jpg" alt="" /></div>
10             <div><img src="img/7.jpg" alt="" /></div>
11         </div>
12         <div class="control">
13             <!-- <span class="control-bar current"></span> -->
14             <!-- <span class="control-bar"></span>
15             <span class="control-bar"></span>
16             <span class="control-bar"></span>
17             <span class="control-bar"></span>
18             <span class="control-bar"></span>
19             <span class="control-bar"></span> -->
20         </div>
21 
22         <span id="pre"></span>
23         <span id="next"></span>
24     </div>
25 </body>

 1 *{margin: 0;padding: 0;}
 2 
 3 .box{
 4     width: 310px;
 5     height: 250px;
 6     margin: 100px auto;
 7     overflow: hidden;
 8     position: relative;
 9 }
10 .content{
11     width: 310px;
12     height: 220px;
13     overflow: hidden;
14     position: relative;
15 }
16 .content div{
17     position: absolute;
18     top: 0;
19     left: 0;
20 }
21 .content div img{
22     width: 310px;
23     height: 220px;
24 }
25 
26 
27 .control{
28     width: 310px;
29     height: 30px;
30     background-color: #333;
31     text-align: center;
32 }
33 .control-bar{
34     display: inline-block;
35     width: 24px;
36     height: 5px;
37     background: url(img/icon.png) no-repeat -24px -790px ;
38     margin: 12px 2px 0 2px;
39     cursor: pointer;
40 }
41 .control .control-bar:hover{
42     background: url('img/icon.png') no-repeat -24px -770px;
43 }
44 
45 .control .control-bar.current{
46     background: url('img/icon.png') no-repeat 0 -770px;
47 }
48 #pre, #next{
49     position: absolute;
50     top: 50%;
51     margin-top: -35px;
52     width: 20px;
53     height: 34px;
54     background-color: pink;
55     cursor: pointer;
56 }    
57 #pre{
58     left: 3px;
59     background:url(img/icon.png) no-repeat 0 0;
60 }
61 #next{
62     right: 3px;
63     background:url(img/icon.png) no-repeat -9px -45px;
64 }

樣式效果如圖：

javascript設置

　　思路：box設置overflow:hidden屬性，第一張圖片顯示在box中，其他圖片均隱藏放置在第一張圖的右邊。當開啓動畫時，第一張圖片向左移動隱藏，下一張圖片向左移動顯示，依次類推，當顯示完最後一張時，繼續回到顯示第一張圖片。

  1 // 前面內容已講過
  2 // 封裝好的獲取屬性函數
  3 function getStyle(element, styleName){
  4     if(element.currentStyle){
  5         return element.currentStyle[styleName];
  6     }else{
  7         var computedStyle = window.getComputedStyle(element, null);
  8         return computedStyle[styleName];
  9     }
 10 }
 11 //封裝好的動畫函數
 12 function animate(element,json){
 13     clearInterval(element.timer);
 14     var isStop = false;
 15     element.timer = setInterval(function(){
 16         isStop = true;
 17         for(var key in json){
 18             var current = parseInt(getStyle(element, key));
 19             var target = json[key];
 20             var step = (target - current) / 10;
 21             step = step > 0 ? Math.ceil(step) : Math.floor(step);
 22             current += step;
 23             if(Math.abs(target -current) > Math.abs(step)){
 24                 isStop = false;
 25             }else{ 
 26                 current = target;
 27             }
 28             element.style[key] = current + 'px';    
 29         }
 30         if(isStop){
 31             clearInterval(element.timer);
 32         }
 33     },30);
 34 }
 35 
 36 //實現輪播圖
 37 window.onload = function(){
 38     var box = document.getElementsByClassName('box')[0];
 39     var contentBox = document.getElementsByClassName('content')[0];
 40     var controlBox = document.getElementsByClassName('control')[0];
 41     var imageDivArr = contentBox.getElementsByTagName('div');
 42 
 43     var currentIndex = 0;
 44     var boxWidth = box.offsetWidth;
 45     //1.動態建立橫條
 46     for(var i= 0; i < imageDivArr.length; i++){
 47         var span = document.createElement('span');
 48         if(i == 0){
 49             span.className = 'control-bar current';
 50         }else{
 51             span.className = 'control-bar'; 
 52         }
 53         span.index = i;
 54         controlBox.appendChild(span);
 55 
 56         //6.設置span點擊事件
 57         span.onclick = function(){
 58             //若是當前點擊的按鈕,就是當前的按鈕則不做操做
 59             if(currentIndex != this.index){
 60 
 61                 //點擊的圖片，在當前圖片的右邊
 62                 if(this.index >　currentIndex){
 63                     //當前的圖片向左移  移除當前位置
 64                     animate(imageDivArr[currentIndex],{left:-boxWidth});
 65 
 66                     //此時被點擊對應的圖片放在顯示框右邊 再進行向左移
 67                     currentIndex = this.index;
 68                     imageDivArr[currentIndex].style.left = boxWidth;
 69 
 70                 }else{ //點擊的圖片，在當前圖片的右邊
 71                     animate(imageDivArr[currentIndex],{left:boxWidth});
 72 
 73                     currentIndex = this.index;
 74                     imageDivArr[currentIndex].style.left = boxWidth;
 75                 }
 76 
 77                 //
 78                 animate(imageDivArr[currentIndex], {left : 0})
 79                 //刷新控制條
 80                 refresh();
 81             }
 82         }
 83     }
 84 
 85     //2.放置圖片位置
 86     // var boxWidth = box.offsetWidth;
 87     for(var i= 0; i < imageDivArr.length; i++){
 88         var imgDiv = imageDivArr[i];
 89         imgDiv.style.left = boxWidth + 'px';
 90     }
 91     imageDivArr[0].style.left = '0';
 92 
 93 
 94     //3.從左邊劃入
 95     // var currentIndex = 0;
 96     function nextImage(){
 97         animate(imageDivArr[currentIndex],{left:-boxWidth});
 98     
 99         currentIndex++;
100     
101         if(currentIndex >= imageDivArr.length){
102             currentIndex = 0;
103         }
104         imageDivArr[currentIndex].style.left = boxWidth + 'px';
105     
106         animate(imageDivArr[currentIndex],{left:0});
107         refresh();
108     }
109 
110     //3.1從右邊劃入
111     function prevImage(){
112         animate(imageDivArr[currentIndex],{left:boxWidth}); //最後一張currentIndex = 6
113     
114         currentIndex--;
115     
116         if(currentIndex < 0){
117             currentIndex = imageDivArr.length - 1;  //返回到最後一張
118         }
119         imageDivArr[currentIndex].style.left = (-boxWidth) + 'px';
120     
121         animate(imageDivArr[currentIndex],{left:0});
122         refresh();
123     }
124 
125     //4.刷新橫條顯示
126     function refresh(){
127         for(var i = 0; i < controlBox.children.length; i++ ){
128             // console.log(controlBox.children[i]);
129             var bar = controlBox.children[i];
130             bar.className = 'control-bar'
131             // console.log(bar);
132         }
133         controlBox.children[currentIndex].className = 'control-bar current';
134     }
135 
136     //點擊箭頭切換
137     document.getElementById('next').onclick = nextImage;
138     document.getElementById('pre').onclick = prevImage;
139 
140     //自動播放
141     var timer = setInterval(nextImage,2000);
142 
143     box.onmouseover = function (){
144         clearInterval(timer);
145     }
146     //移出時，從新開始定時器
147     box.onmouseout = function (){
148         timer = setInterval(nextImage ,2000);    
149     }
150 }

　　四、「旋轉木馬」輪播圖

　　　　html+css樣式設置

 1 <body>
 2     <div class="box">
 3         
 4         <!-- 圖片設置 -->
 5         <div class="content">
 6             <ul>
 7                 <li>![](images/slidepic1.jpg)</li>
 8                 <li>![](images/slidepic2.jpg)</li>
 9                 <li>![](images/slidepic3.jpg)</li>
10                 <li>![](images/slidepic4.jpg)</li>
11                 <li>![](images/slidepic5.jpg)</li>
12             </ul>
13         </div>
14         
15         <!-- 左右箭頭設置 -->
16         <div class="control">
17             <a href="javascript:;" id="prev"></a>
18             <a href="javascript:;" id="next"></a>
19         </div>
20     </div>
21 </body>

 1 *{margin: 0;padding: 0;}
 2 ul{list-style: none;}
 3 /*大盒子*/
 4 .box{
 5     width: 1000px;
 6     margin: 5px auto;
 7     position: relative;
 8     background-color: pink;
 9 }
10 
11 /*左右箭頭*/
12 #next, #prev{
13     position: absolute;
14     width: 76px;
15     height: 112px;
16     top: 0;
17     background: url(../images/next_1.png) no-repeat 0 0;
18     z-index: 5;
19 }
20 #next{
21     right: 10px;
22 }
23 #prev{
24     left: 10px;
25     background: url(../images/prev_1.png) no-repeat 0 0;
26 }
27 
28 
29 .box .content li{
30     position: absolute;
31 
32 }
33 .box .content li img{
34     width: 100%;
35 }
36 
37 /*能夠經過css設置定位
38 .box .content li.li1{
39     width: 300px;
40     opacity: 0.4;
41     top: 30px;
42     left: 50px;
43     z-index: 1;
44 }
45 .box .content li.li2{
46     width: 400px;
47     opacity: 0.7;
48     top: 100px;
49     left: 0;
50     z-index: 2;
51 }
52 .box .content .li3{
53     width: 600px;
54     opacity: 1;
55     top: 200px;
56     left: 200px;
57     z-index: 3;
58 }
59 .box .content .li4{
60     width: 400px;
61     opacity: 0.7;
62     right: 0;
63     top: 100px;
64     z-index: 2;
65 }
66 .box .content .li5{
67     width: 300px;
68     opacity: 0.4;
69     top: 30px;
70     right: 50px;
71     z-index: 1;
72 }
73 */

　　javascript設置

window.onload =function () {
        //定位置 五個位置對應五個json對象,放入數組中,能夠靈活的獲取這些json對象
        var json = [{
            width: 300,
            opacity: 0.4,
            top: 30,
            left: 50,
            zIndex: 1
        },{
            width: 400,
            opacity: 0.7,
            top: 100,
            left: 20,
            zIndex: 2
        },{
            width: 700,
            opacity: 1,
            top: 200,
            left: 150,
            zIndex: 3
        },{
            width: 400,
            opacity: 0.7,
            top: 100,
            left: 580,
            zIndex: 2
        },{
            width: 300,
            opacity: 0.4,
            top: 30,
            left: 650,
            zIndex: 1
        }];

        refreshImageLocation(0);
        function refreshImageLocation(index){
            //默認狀況下 第i個對應i-index個位置
            var liArr = $('li');
            console.log(liArr);
            for(var i = 0; i < liArr.length; i++){
                var li = liArr[i];
                var locationIndex = i - index;

                if(locationIndex < 0){
                    locationIndex += 5;
                }

                var locationDate = json[locationIndex];
                console.log(locationDate);

                animate(li, locationDate, null);
            }
        }

        var index = 0;
        //設置點擊箭頭事件
        $('#next').onclick = function(){
            // console.log('#next');
            index++;
            if(index == 5){
                index = 0;
            }
            refreshImageLocation(index);
        }

        $('#prev').onclick = function(){
            index--;
            if(index < 0){
                index = 4;
            }
            refreshImageLocation(index);
        }
        
    }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。