JS循環輪播圖
- 韦小宝原創
- 2017-11-20 11:22:132189瀏覽
JS循環輪播圖，可以拿去研究也可以放在自己的專案中使用，免費提供JS原始碼~幫助你們學習JS咯~
程式碼：
<!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.php.cn/tpl/Index/Static/img/zhibo4.jpg);
}
.img:nth-of-type(2){
background-image: url(http://www.php.cn/tpl/Index/Static/img/banner1.jpg);
}
.img:nth-of-type(3){
background-image: url(http://www.php.cn/tpl/Index/Static/img/banner3.jpg);
}
.img:nth-of-type(4){
background-image: url(http://www.php.cn/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循環輪播圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn