时间：2021-07-01 10:21:17 帮助过：9人阅读
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP中文网</title>
<style>
.container{
width: 1068px;
height: 400px;
margin: 100px auto;
position: relative;
}
.container .img{
display: inline-block;
position: absolute;
transition: all 1s;
background-size: cover;
}
.container .img:after{
content: "";
text-align: center;
position: absolute;
bottom: -80px;
height: 1px;
width: 94%;
margin: auto 3%;
box-shadow: 0 0 20px 15px rgba(0, 0, 0, 1);
opacity: 0.05;
background-color: #000;
}
.img:nth-of-type(1){
background-image: url(http://www.gxlcms.com/tpl/Index/Static/img/zhibo4.jpg);
}
.img:nth-of-type(2){
background-image: url(http://www.gxlcms.com/tpl/Index/Static/img/banner1.jpg);
}
.img:nth-of-type(3){
background-image: url(http://www.gxlcms.com/tpl/Index/Static/img/banner3.jpg);
}
.img:nth-of-type(4){
background-image: url(http://www.gxlcms.com/tpl/Index/Static/img/banner4.jpg);
}
#btnLeft{
cursor: pointer;
width: 234px;
height: 400px;
position: absolute;
z-index: 10;
background-color: rgba(223, 80, 0, 0);
}
#btnRight{
cursor: pointer;
width: 234px;
height: 400px;
position: absolute;
right: 0;
z-index: 10;
background-color: rgba(223, 80, 0, 0);
}
</style>
</head>
<body>
<div>
<span id="btnLeft"></span>
<span id="btnRight"></span>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<script>
var img = document.getElementsByClassName("img");
var num = 40000;//负数求模不好操作，所以给个大数字吧
function setImg() {
//求模的方法能让num始终在0-3之间循环
var numA = num % 4;
var numB = (num + 1) % 4;
var numC = (num + 2) % 4;
var numD = (num + 3) % 4;
img[numA].style.width = 600 + "px";
img[numA].style.height = 400 + "px";
img[numA].style.backgroundColor = "#808080";
img[numA].style.zIndex = 4;
img[numA].style.left = 234 + "px";
img[numA].style.top = 0;
img[numA].style.opacity = 1;
img[numB].style.width = 468 + "px";
img[numB].style.height = 312 + "px";
img[numB].style.backgroundColor = "#666666";
img[numB].style.zIndex = 1;
img[numB].style.left = 0;
img[numB].style.top = 44 + "px";
img[numB].style.opacity = 0.6;
img[numC].style.width = 351 + "px";
img[numC].style.height = 234 + "px";
img[numC].style.backgroundColor = "#666666";
img[numC].style.zIndex = 0;
img[numC].style.left = 534 + "px";
img[numC].style.top = 83 + "px";
img[numC].style.opacity = 0;
img[numD].style.width = 468 + "px";
img[numD].style.height = 312 + "px";
img[numD].style.backgroundColor = "#666666";
img[numD].style.zIndex = 1;
img[numD].style.left = 600 + "px";
img[numD].style.top = 44 + "px";
img[numD].style.opacity = 0.6;
}
setImg();
window.setInterval(function(){
num ++;
setImg()
},4000);
document.getElementById("btnLeft").onclick = function () {
num ++;
setImg()
};
document.getElementById("btnRight").onclick = function () {
num --;
setImg()
};
</script>
</body>
</html>以上是JS循环轮播图的所有源码，有兴趣的朋友可以拿去研究。
相关推荐：
JS模仿聊天页面
js实现背景动画分裂
JavaScript原生代码实现幻灯片
以上就是JS循环轮播图的详细内容，更多请关注Gxl网其它相关文章！