JS 루프 캐러셀 차트
- 韦小宝원래의
- 2017-11-20 11:22:132188검색
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 루프 캐러셀의 소스 코드입니다. 관심 있는 친구들은 공부에 활용해도 좋습니다.
관련 권장사항:
JavaScript 네이티브 코드는 슬라이드쇼를 구현합니다
위 내용은 JS 루프 캐러셀 차트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.