原理介绍
- 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;
}
- 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";
}
效果如下所示: