js輪播圖特效
阿新 • • 發佈：2022-03-15
前言
輪播圖一般是廣告區域使用，可定時切換，暫停。以下是原生js寫的一個demo
html程式碼塊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js輪播</title> <link rel="stylesheet" type="text/css" href="css/css.css"> </head> <body> <div class="main" id="main"> <div class="banner" id="banner"> <a href=""> <div class="banner-slide slide1 slide-active "></div> </a> <a href=""> <div class="banner-slide slide2"></div> </a><a href=""> <div class="banner-slide slide3"></div> </a> </div> <a class="button prev" id="prev"></a> <a class="button next" id="next"></a> <div class="dots" id="dots"> <span class="active"></span> <span></span> <span></span> </div> </div> <script type="text/javascript" src="js/banner.js"></script> </body> </html>
css程式碼塊
*{ margin: 0; padding: 0; font-family: '微軟雅黑'; } .main{ width: 1200px; height: 460px; margin: 30px auto; position: relative; } .banner{ width: 1200px; height: 460px; overflow: hidden; } .banner-slide{ width: 1200px; height: 460px; float: left; display: none; background-repeat: no-repeat; } .slide-active{ display: block; } .slide1{ background-image: url("../img/bg1.jpeg"); } .slide2{ background-image: url("../img/bg2.jpeg"); } .slide3{ background-image: url("../img/bg3.jpeg"); } .button{ width: 40px; height: 80px; background: url("../img/arrow.png") center center no-repeat; position: absolute; left: 0px; top: 50%; margin-top: -40px; transform: rotate(180deg); } .next{ left: auto; right: 0px; transform: rotate(0deg); } .button:hover{ background-color: #333; opacity: 0.8; cursor: pointer; } .dots{ position: absolute; right: 24px; line-height: 12px; bottom: 24px; } .dots span{ width:12px; height: 12px; border-radius: 50%; display: inline-block; background-color: rgba(7,17,27,0.4); margin-left: 8px; box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset; cursor: pointer; } .dots span.active{ background-color: #fff; box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset; }
js程式碼塊
var index = 0, prev = document.getElementById("prev"), next = document.getElementById("next"), timer = null, main = document.getElementById("main"), dots = document.getElementById("dots").getElementsByTagName("span"), pics = document.getElementById("banner").getElementsByTagName("div"), size = pics.length; function changeImg() { for (var i = 0; i < size; ++i){ pics[i].style.display = "none"; dots[i].className = ""; } pics[index].style.display = "block"; dots[index].className = "active"; } next.addEventListener("click",function () { index++; if (index >= size){ index = 0; } changeImg(); },true); prev.addEventListener("click",function () { index--; if (index < 0){ index = size - 1; } changeImg(); },true); for (var d = 0; d < size; ++d){ dots[d].setAttribute("tid",d); dots[d].addEventListener("click",function () { index = this.getAttribute("tid"); changeImg(); },true); } function startAutoPlay() { timer = setInterval(function () { index++; if (index >= size){ index = 0; } changeImg(); },3000); } function stopAutoPlay() { if (timer){ clearInterval(timer); } } main.addEventListener("mouseover",function () { stopAutoPlay(); },true); main.addEventListener("mouseout",function () { startAutoPlay(); },true) startAutoPlay();
主要原理就是用js的id獲取到物件，進行隱藏，清除和顯示操作。適合初學js入門練習