JS实现轮播图效果

本文实例为大家分享了JS实现轮播图展示的具体代码，供大家参考，具体内容如下原理介绍1

本文实例为大家分享了JS实现轮播图展示的具体代码，供大家参考，具体内容如下

原理介绍

1.html 

<div id="swiper-container" class="swiper-container" onmouseenter="swiperImg()" onmouseleave="stopSwiper()">
 <div id="img-list" style="left:0px;">
 <img src="img/swiper1.png" alt="1">
 <img src="img/swiper2.png" alt="2">
 <img src="img/swiper1.png" alt="1">
 <img src="img/swiper2.png" alt="2">
 </div>
 <div id="swiper-btn">
 <span index="1" class="on"></span>
 <span index="2"></span>
 </div>
</div>

布局很简单，利用一个class="swiper-container"的div，包裹图片列表，swiper-btn是按钮

2. css

 * {
 margin: 0;
 padding: 0;
 }

 a {
 text-decoration: none;
 }

 .swiper-container {
 position: relative;
 width: 300px;
 height: 300px;
 margin: 0 auto;
 border: 1px solid;
 overflow: hidden;
 }

 #img-list {
 position: absolute;
 width: 1200px;
 height: 300px;
 }

 #img-list img {
 float: left;
 }

 #swiper-btn {
 position: absolute;
 bottom: 5%;
 left: 45%;
 }

 #swiper-btn span {
 display: inline-block;
 width: 10px;
 height: 10px;
 border-radius: 5px;

 }

 .on {
 background-color: goldenrod;
 }

 span {
 background-color: #d7d7d7;
 }

3.js

var timer;
 var div = document.getElementById('img-list');
 var span = document.getElementById('swiper-btn').getElementsByTagName('span');
 var offset = -300;
 var index = 1;
 function swiperImg() {
 timer = setInterval(() => {
 var left = parseInt(div.style.left);
 var newLeft = left + offset;
 if (newLeft <= -1200) {
 div.style.left = '0px';
 }
 else {
 div.style.left = newLeft + 'px';
 }
 showBtn(parseInt(div.style.left));
 }, 3000);
 }

 function showBtn(left) {
 if (left == 0 || left == -600) {
 span[0].className = "on";
 span[1].className = "";
 }
 else {
 span[0].className = "";
 span[1].className = "on";
 }
 }

 function stopSwiper() {
 clearInterval(timer);
 }

 for (var i = 0; i < span.length; i++) {
 span[i].onclick = function () {
 if (this.className == "on") {
 return false;
 }
 var myIndex = parseInt(this.getAttribute("index"));
 if (myIndex == 1)
 div.style.left = 0 + 'px';
 if (myIndex == 2)
 div.style.left = -300 + 'px';
 index = myIndex;
 showButton();
 }
 }

 function showButton() {
 for (var i = 0; i < span.length; i++) { //全部取消掉on样式
 if (span[i].className == "on") {
 span[i].className = "";
 break;
 }
 }
 span[index - 1].className = "on";
 }

效果如下所示：