JavaScript五種方式實現圖片輪播

時間 2020-05-06

標籤 javascript 五種方式實現圖片欄目 JavaScript 简体版

原文原文鏈接

實現圖片輪播的主要思路總結：javascript

一、將多張圖片水平或者垂直方向銜接排好，沿着某一個方式移動，父元素設置固定的大小，溢出的內容進行隱藏css

2，經過position條件下：z-index的覆蓋顯示。html

三、改變透明度實現圖片輪播vue

基於上面的思路，下面是五種實現的方式：java

方式一：vue + swiper 實現圖片輪播jquery

一、安裝swipernpm

npm install swiper數組

二、在組件中引用swiper閉包

import Swiper from 'swiper';app

import 'swiper/dist/css/swiper.min.css';

三、實例代碼：

 1 <template>
 2   <div class="slide" v-on:mouseover="stop()" v-on:mouseout="move()">
 3     <div class="slideshow">
 4       <transition-group tag="ul" name="image">
 5         <li v-for="(img, index) in imgArray" v-show="index===mark" :key="index">
 6           <a href="#">
 7             <img :src='img'>
 8           </a>
 9         </li>
 10       </transition-group>
 11     </div>
 12     <div class="bar">
 13       <span v-for="(item, index) in imgArray" :class="{ 'active':index===mark }"
 14  @click="change(index)" :key="index"></span>
 15     </div>
 16   </div>
 17 </template>
 18 
 19 <script>
 20 export default {  21  data () {  22     return {  23  timer: null, //定時器
 24  mark: 0, //比對圖片索引的變量
 25  imgArray: [//圖片路徑
 26  require('../../images/1.png'),  27  require('../../images/2.png'),  28  require('../../images/3.png'),  29  require('../../images/4.png')  30  ]  31  }  32  },  33  methods: {  34  autoPlay () {  35       this.mark++;  36       if (this.mark === 4) {  37         this.mark = 0
 38  }  39  },  40  play () {  41       this.timer = setInterval(this.autoPlay, 2500)  42  },  43  change (i) {  44       this.mark = i  45  },  46  stop () {  47  clearInterval(this.timer)  48  },  49  move () {  50       this.timer = setInterval(this.autoPlay, 2500)  51  }  52  },  53  created () {  54     this.play()  55  }  56 }  57 </script>
 58 
 59 
 60 <style scoped>
 61  * {
 62  margin: 0;
 63  padding: 0;
 64  list-style: none;
 65   }
 66  .slide {
 67  width: 100%;
 68  height: 320px;
 69  margin: 0 auto;
 70  overflow: hidden;
 71  position: relative;
 72   }
 73  .slideshow {
 74  width: 100%;
 75  height: 320px;
 76   }
 77  .slideshow ul{
 78  width:100%;
 79  height: 320px;
 80   }
 81  li {
 82  width:100%;
 83  position: absolute;
 84   }
 85  .slideshow ul a{
 86  display: inline-block;
 87  width:100%;
 88   }
 89  img {
 90  width: 100%;
 91  height: 320px;
 92   }
 93  .bar {
 94  position: absolute;
 95  width: 100%;
 96  bottom: 10px;
 97  margin: 0 auto;
 98  z-index: 10;
 99  text-align: center;
100   }
101  .bar span {
102  width: 10px;
103  height: 10px;
104  border-radius:50%;
105  background: white;
106  display: inline-block;
107  margin-right: 10px;
108   }
109  .active {
110  background: red !important;
111   }
112  .image-enter-active {
113  transform: translateX(0);
114  transition: all 1.5s ease;
115   }
116  .image-leave-active {
117  transform: translateX(-100%);
118  transition: all 1.5s ease;
119   }
120  .image-enter {
121  transform: translateX(100%);
122   }
123  .image-leave {
124  transform: translateX(0);
125   }
126 
127 </style>

方式二：jQuery實現輪播圖

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7  .pic{
 8  width: 790px;
 9  height: 340px;
 10  margin: 10px auto;
 11  position: relative;
 12  overflow: hidden;
 13         }
 14  .content{
 15  width: 99999px;
 16  height: 340px;
 17  position: absolute;
 18  left: 0px;
 19  top: 0px;
 20 
 21         }
 22  .content img{
 23  float: left;
 24         }
 25  .index{
 26  position: absolute;
 27  left: 300px;
 28  bottom: 5px;
 29  width: 200px;
 30  height: 20px;
 31  list-style: none;
 32         }
 33  .index li{
 34  width: 10px;
 35  height: 10px;
 36  border-radius: 50%;
 37  float: left;
 38  margin-left: 10px;
 39  background-color: rgba(100,100,100,0.3);
 40         }
 41 
 42  .left{
 43  width: 30px;
 44  height:50px;
 45  background-color:rgba(100,100,100,0.5);  
 46  position: absolute;
 47  left: 0px;
 48  top: 150px;
 49  line-height: 50px;
 50  text-align: center;
 51  font-size: 20px;
 52  color: #fff;
 53  display: none;
 54         }
 55  .right{
 56  width: 30px;
 57  height:50px;
 58  background-color:rgba(100,100,100,0.5);  
 59  position: absolute;
 60  right: 0px;
 61  top: 150px;
 62  line-height: 50px;
 63  text-align: center;
 64  font-size: 20px;
 65  color: #fff;
 66  display: none;
 67         }
 68  .index .first{
 69  background-color: red;
 70         }
 71 
 72     </style>
 73     <script type="text/javascript" src="jquery/jquery-3.0.0.min.js"></script>
 74 </head>
 75 <body>
 76     <div class="pic">
 77         <div class="content">
 78  ![](images/(1).jpg)  79  ![](images/(2).jpg)  80  ![](images/(3).jpg)  81  ![](images/(4).jpg)  82  ![](images/(5).jpg)  83  ![](images/(6).jpg)  84  ![](images/(7).jpg)  85  ![](images/(8).jpg)  86         </div>
 87         <ul class="index">
 88             <li class="first"></li>
 89             <li></li>
 90             <li></li>
 91             <li></li>
 92             <li></li>
 93             <li></li>
 94             <li></li>
 95             <li></li>
 96         </ul>
 97         <div class="right">></div>
 98         <div class="left"><</div>
 99     </div>
100     <script type="text/javascript">
101  $(function(){ 102             //每一個固定的時間移動圖片
103             var timer = setInterval(picLoop,1000); 104             var index = 0; 105             function picLoop(){ 106  index++; 107                 if (index==8) {index=0;} 108  $(".content").animate({"left":-790*index},300); 109  $("li").eq(index).css("background-color","red") 110  .siblings().css("background-color","rgba(100,100,100,0.3)"); 111  } 112 
113             //定時器的控制
114  $(".pic").hover(function(){ 115  clearInterval(timer); 116  $(".left").show(); 117  $(".right").show(); 118  },function(){ 119  timer = setInterval(picLoop,1000); 120  $(".left").hide(); 121  $(".right").hide(); 122  }) 123 
124  $("li").mouseover(function(){ 125  $(this).css("background-color","red") 126  .siblings().css("background-color","rgba(100,100,100,0.3)"); 127  index = $(this).index(); 128  $(".content").animate({"left":-790*index},300); 129 
130  }) 131 
132  $(".left").click(function(){ 133  index--; 134                 if (index==-1) {index=7;} 135  $(".content").animate({"left":-790*index},300); 136  $("li").eq(index).css("background-color","red") 137  .siblings().css("background-color","rgba(100,100,100,0.3)"); 138  }) 139  $(".right").click(function(){ 140  index++; 141                 if (index==8) {index=0} 142  $(".content").animate({"left":-790*index},300); 143  $("li").eq(index).css("background-color","red") 144  .siblings().css("background-color","rgba(100,100,100,0.3)"); 145  }) 146 
147 
148  }) 149     </script>
150 </body>
151 </html>

方式三：改變透明度實現圖片輪播

將全部要輪播的圖片所有定位到一塊兒，即一層一層摞起來，而且利用層級的屬性調整正確的圖片順序，將圖片的透明度所有設置爲0，而後在讓初始的第一張圖片的透明度爲1便可，具體代碼以下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7  html body {
 8  margin: 0;
 9  padding: 0;
 10         }
 11  li{
 12  list-style: none;
 13         }
 14  .div1{
 15  width: 500px;
 16  height: 400px;
 17  margin: 50px auto;
 18  position: relative;
 19  border: 1px solid black;
 20 
 21         }
 22  .div1 a img {
 23  width: 400px;
 24  position: absolute;
 25  margin: 118px 50px;
 26         }
 27  .div1 ul{
 28  position: absolute;
 29  bottom: 110px;
 30  right:53px;
 31  z-index: 10;
 32         }
 33  .div1 ul li {
 34  width: 15px;
 35  height: 15px;
 36  line-height: 15px;
 37  border-radius: 50%;
 38  float: left;
 39  background-color: white;
 40  margin-right: 5px;
 41  cursor: pointer;
 42  text-align: center;
 43         }
 44     </style>
 45 </head>
 46 <body>
 47 <div class="div1" id="div1">
 48     <a href="javascript:void(0)"><img src="images/1.jpg"></a>
 49     <a href="javascript:void(0)"><img src="images/2.jpg"></a>
 50     <a href="javascript:void(0)"><img src="images/3.jpg"></a>
 51     <a href="javascript:void(0)"><img src="images/4.jpg"></a>
 52     <a href="javascript:void(0)"><img src="images/5.jpg"></a>
 53     <ul>
 54         <li>1</li>
 55         <li>2</li>
 56         <li>3</li>
 57         <li>4</li>
 58         <li>5</li>
 59     </ul>
 60 </div>
 61 <script>
 62     var div1 = document.getElementById("div1");//整個區域
 63     var a1 = div1.getElementsByTagName("a");//a標籤 圖片
 64     var li1 = div1.getElementsByTagName("li");//右下角按鈕
 65     var ab = 0; //ab的值控制觸摸按鈕後的下一張圖
 66     //遍歷全部圖和按鈕,頁面加載完畢顯示第一張圖和第一個按鈕
 67  window.onload = function () {  68         for (var i=0;i<a1.length;i++){  69             if (i!=0){  70  a1[i].style.opacity = 0;  71  }else {  72  li1[i].style.backgroundColor = "green";  73  }  74  }  75  };  76     //運行函數bb();
 77     function bb() {  78      for (var j=0;j<li1.length;j++) {  79          //遍歷全部的按鈕,全部按鈕都給綁定一個鼠標移上去的onmouseover事件
 80  li1[j].onmouseover = function () {  81              //變量index就是當前觸摸的按鈕的文本-1,此前特地設置按鈕文本爲數字
 82              var index = this.innerHTML - 1;  83  ab = index; //ab後面用return返回
 84              //聲明變量b
 85              for (var b = 0; b < li1.length; b++) {  86                  //當b就是被觸摸到的按鈕的索引號時,設置第b張圖片不透明度爲100,漸變透明度效果1s,第b個按鈕背景色變成green
 87                  if (b == index) {  88  a1[b].style.opacity = 100;  89  a1[b].style.transition = "opacity 1s";  90  li1[b].style.backgroundColor = "green";  91  } else { //當b不是被觸摸到的按鈕的索引號時,就變透明,按鈕顏色白色.
 92  a1[b].style.opacity = 0;  93  li1[b].style.backgroundColor = "white";  94  }  95  }  96              return ab; //返回ab,貌似運用到了閉包?不太瞭解.
 97  }  98 
 99  } 100  setInterval(function ac() { //設置2000毫秒重複運行
101  ab = ab>li1.length-2?0:++ab; //5張圖,當觸摸到的按鈕索引號大於3時(好比4),那麼ab=0(下一張圖爲第0張),不然++ab;
102          //循環遍歷下一張圖的效果.
103                 for (var b = 0; b < li1.length; b++) { 104                     if (b == ab) { 105  a1[b].style.opacity = 100; 106  a1[b].style.transition = "opacity 1s"; 107  li1[b].style.backgroundColor = "green"; 108  } else { 109  a1[b].style.opacity = 0; 110  li1[b].style.backgroundColor = "white"; 111  } 112  } 113  },2000); 114  } 115  bb(); //運行bb()
116 </script>
117 </body>
118 </html>

方法四：利用層級的高低來使最頂部圖片變化的作法，這個作法也沒有位移的動做，每次改變圖片z-index的值來控制輪播，有一點問題就是，方向可能很差控制。

代碼：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>輪播圖 (閃現 自適應)</title>
 6 <style media="screen">
 7 * {
 8 margin: 0;
 9 padding: 0;
10 }
11 .wrap {
12 width: 60%;
13 background: red;
14 margin: auto;
15 position: relative;
16 }
17 .wrap img {
18 width: 100%;
19 position: absolute;
20 /*z-index: 10;*/
21 }
22 input {
23 border: 1px solid lightgray;
24 width: 50px;
25 height: 30px;
26 background: red;
27 border-radius: 5px;
28 font-size: 20px;
29 }
30 </style>
31 </head>
32 <body>
33 <div class="wrap">
34 <img src="images/1.jpg" alt="" />
35 <img src="images/2.jpg" alt="" />
36 <img src="images/3.jpg" alt="" />
37 <img src="images/4.jpg" alt="" />
38 </div>
39 <input type="button" id="butLeft" name="name" value="◀︎">
40 <input type="button" id="butRight" name="name" value="▶︎">
41 </body>
42 <script type="text/javascript">
43 // 獲取images元素生成字符串數組，字符串數組不能進行push pop splice 等操做
44 // 因此要將它的值從新存放進一個數組中，後面有定義
45 var images = document.getElementsByTagName('img'); 46 var butLeft = document.getElementById('butLeft'); 47 var butRight = document.getElementById('butRight'); 48 //獲取變量index 用來爲後面設置層級用
49 var index = 1000; 50 // 獲取一個空的數組，用來存放images裏面的字符串元素
51 var imagess = []; 52 
53 // for循環用來給imagess數組賦值，而且改變數組中的元素的層級
54 for (var i = 0; i < images.length; i++) { 55 imagess[i] = images[i]; 56 var currentImage = imagess[i]; 57 // 當前圖片的層級的設置，一輪for循環都爲他們設置了初始的zIndex，圖片越靠前，層級設置
58 // 要求越高，因此用的是－i,這樣圖片會按順序從第一張，第二張.....依次向下
59 currentImage.style.zIndex = -i; 60 } 61 
62 
63 
64 // 設置計數器count，執行一次點擊事件（向左或者向右）count加1
65 var count = 0; 66 
67 
68 // 向左的點擊事件
69 butLeft.onclick = function() { 70 // 從數組頭部彈出一個圖片元素
71 var showFirst = imagess.shift(); 72 // 給彈出的這個圖片元素設置層級，即 －1000+count，
73 // 讓層級相較其餘元素是最小的，數組頭部彈出的圖片會顯示在最底層
74 showFirst.style.zIndex = - index + count; 75 // 層級改變完成後再將他push進數組的尾部
76 imagess.push(showFirst); 77 // 點擊一次加1，不用考慮具體的值，只須要有點擊事件加 1
78 count++; 79 } 80 // 向右點擊事件
81 butRight.onclick = function() { 82 // 從imagess的尾部彈出一個元素，並賦值給showFirst
83 var showFirst = imagess.pop(); 84 // 設置showFirst的層級爲最大，1000+count ，這樣他會顯示在第一層
85 showFirst.style.zIndex = index + count; 86 // 層級改變以後將他在插入數組imagess的頭部
87 imagess.unshift(showFirst); 88 // 點擊一次加1
89 count++; 90 } 91 </script>
92 </html>

方式五：將一些圖片在一行中平鋪，而後計算偏移量再利用定時器實現定時輪播。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>輪播效果</title>
 6     <style>
 7  * {
 8  margin: 0;
 9  padding: 0  10         }
 11  .box {
 12  width: 500px;
 13  height: 300px;
 14  border: 1px solid #ccc;
 15  margin: 100px auto;
 16  padding: 5px;
 17  
 18         }
 19  .inner{
 20  width: 500px;
 21  height: 300px;
 22  position: relative;
 23  overflow: hidden;
 24         }
 25  .inner img{
 26  width: 500px;
 27  height: 300px;
 28  vertical-align: top  29         }
 30  ul {
 31  width: 1000%;
 32  position: absolute;
 33  list-style: none;
 34  left:0;
 35  top: 0;
 36         }
 37  .inner li{
 38  float: left;
 39  
 40         }
 41  
 42  ol {
 43  position: absolute;
 44  height: 20px;
 45  right: 20px;
 46  bottom: 20px;
 47  text-align: center;
 48  padding: 5px;
 49         }
 50  ol li{
 51  display: inline-block;
 52  width: 20px;
 53  height: 20px;
 54  line-height: 20px;
 55  background-color: #fff;
 56  margin: 5px;
 57  cursor: pointer;
 58  
 59         }
 60  ol .current{
 61  background-color: red;
 62         }
 63  #arr{
 64  display: none;
 65         }
 66  #arr span{
 67  width: 40px;
 68  height: 40px;
 69  position: absolute;
 70  left: 5px;
 71  top: 50%;
 72  margin-top: -20px;
 73  background: #fff;
 74  cursor: pointer;
 75  line-height: 40px;
 76  text-align: center;
 77  font-weight: bold;
 78  font-family: '黑體';
 79  font-size: 30px;
 80  color: #000;
 81  opacity: 0.5;
 82  border: 1px solid #fff;
 83         }
 84  #arr #right {
 85  right: 5px;
 86  left: auto;
 87         }
 88     </style>
 89 </head>
 90 <body>
 91 <div class="box" id="box">
 92     <div class="inner">
 93         <!--輪播圖-->
 94         <ul>
 95             <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
 96             <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
 97             <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
 98             <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
 99             <li><a href="#"><img src="images/5.jpg" alt=""></a></li>
100  
101         </ul>
102  
103         <ol class="bar">
104  
105         </ol>
106         <!--左右焦點-->
107         <div id="arr">
108                     <span id="left">
109                         <
110  </span>
111             <span id="right">
112  > 113                     </span>
114         </div>
115  
116     </div>
117 </div>
118 <script>
119     /** 120  * 121  * @param id 傳入元素的id 122  * @returns {HTMLElement | null} 返回標籤對象，方便獲取元素 123      */
124     function my$(id) { 125         return document.getElementById(id); 126  } 127  
128     //獲取各元素，方便操做
129     var box=my$("box"); 130     var inner=box.children[0]; 131     var ulObj=inner.children[0]; 132     var list=ulObj.children; 133     var olObj=inner.children[1]; 134     var arr=my$("arr"); 135     var imgWidth=inner.offsetWidth; 136     var right=my$("right"); 137     var pic=0; 138     //根據li個數，建立小按鈕
139     for(var i=0;i<list.length;i++){ 140         var liObj=document.createElement("li"); 141  
142  olObj.appendChild(liObj); 143  liObj.innerText=(i+1); 144  liObj.setAttribute("index",i); 145  
146         //爲按鈕註冊mouseover事件
147  liObj.οnmοuseοver=function () { 148             //先清除全部按鈕的樣式
149  
150             for (var j=0;j<olObj.children.length;j++){ 151  olObj.children[j].removeAttribute("class"); 152  } 153             this.className="current"; 154  pic=this.getAttribute("index"); 155  animate(ulObj,-pic*imgWidth); 156  } 157  
158  } 159  
160  
161     //設置ol中第一個li有背景顏色
162  olObj.children[0].className = "current"; 163     //克隆一個ul中第一個li,加入到ul中的最後=====克隆
164  ulObj.appendChild(ulObj.children[0].cloneNode(true)); 165  
166     var timeId=setInterval(onmouseclickHandle,1000); 167     //左右焦點實現點擊切換圖片功能
168  box.οnmοuseοver=function () { 169  arr.style.display="block"; 170  clearInterval(timeId); 171  }; 172  box.οnmοuseοut=function () { 173  arr.style.display="none"; 174  timeId=setInterval(onmouseclickHandle,1000); 175  }; 176  
177  right.οnclick=onmouseclickHandle; 178     function onmouseclickHandle() { 179         //若是pic的值是5,恰巧是ul中li的個數-1的值,此時頁面顯示第六個圖片,而用戶會認爲這是第一個圖,
180         //因此,若是用戶再次點擊按鈕,用戶應該看到第二個圖片
181         if (pic == list.length - 1) { 182             //如何從第6個圖,跳轉到第一個圖
183  pic = 0;//先設置pic=0
184  ulObj.style.left = 0 + "px";//把ul的位置還原成開始的默認位置
185  } 186  pic++;//馬上設置pic加1,那麼此時用戶就會看到第二個圖片了
187  animate(ulObj, -pic * imgWidth);//pic從0的值加1以後,pic的值是1,而後ul移動出去一個圖片
188         //若是pic==5說明,此時顯示第6個圖(內容是第一張圖片),第一個小按鈕有顏色,
189         if (pic == list.length - 1) { 190             //第五個按鈕顏色幹掉
191  olObj.children[olObj.children.length - 1].className = ""; 192             //第一個按鈕顏色設置上
193  olObj.children[0].className = "current"; 194  } else { 195             //幹掉全部的小按鈕的背景顏色
196             for (var i = 0; i < olObj.children.length; i++) { 197  olObj.children[i].removeAttribute("class"); 198  } 199  olObj.children[pic].className = "current"; 200  } 201  } 202  left.οnclick=function () { 203         if (pic==0){ 204  pic=list.length-1; 205  ulObj.style.left=-pic*imgWidth+"px"; 206  } 207  pic--; 208  animate(ulObj,-pic*imgWidth); 209         for (var i = 0; i < olObj.children.length; i++) { 210  olObj.children[i].removeAttribute("class"); 211  } 212         //當前的pic索引對應的按鈕設置顏色
213  olObj.children[pic].className = "current"; 214  }; 215  
216     //設置任意的一個元素,移動到指定的目標位置
217     function animate(element, target) { 218  clearInterval(element.timeId); 219         //定時器的id值存儲到對象的一個屬性中
220  element.timeId = setInterval(function () { 221             //獲取元素的當前的位置,數字類型
222             var current = element.offsetLeft; 223             //每次移動的距離
224             var step = 10; 225  step = current < target ? step : -step; 226             //當前移動到位置
227  current += step; 228             if (Math.abs(current - target) > Math.abs(step)) { 229  element.style.left = current + "px"; 230  } else { 231                 //清理定時器
232  clearInterval(element.timeId); 233                 //直接到達目標
234  element.style.left = target + "px"; 235  } 236  }, 10); 237  } 238 </script>
239 </body>
240 </html>