作者:donglin204 | 来源:互联网 | 2021-09-23 01:32
本文实例为大家分享了JS实现轮播图展示的具体代码,供大家参考,具体内容如下
原理介绍
1.html
布局很简单,利用一个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
效果如下所示:
更多关于轮播图效果的专题,请点击下方链接查看学习
Javascript图片轮播效果汇总
jquery图片轮播效果汇总
Bootstrap轮播特效汇总
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。