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 중국어 웹사이트의 기타 관련 기사를 참조하세요!