JavaScript五种方式实现图片轮播
实现图片轮播的主要思路总结：
1、将多张图片水平或者垂直方向衔接排好，沿着某一个方式移动，父元素设置固定的大小，溢出的内容进行隐藏
2，通过position条件下：z-index的覆盖显示。
3、改变透明度实现图片轮播
基于上面的思路，下面是五种实现的方式：
方式一：vue + swiper 实现图片轮播
1、安装swiper
npm install swiper
2、在组件中引用swiper
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
3、实例代码：
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 .jpg) 79 .jpg) 80 .jpg) 81 .jpg) 82 .jpg) 83 .jpg) 84 .jpg) 85 .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>
