布局很简单，利用一个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";
}效果如下所示：
以上是“JS怎么实现轮播图效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！