Javascript或jQuery做輪播圖

css樣式

<style> a{ text-decoration:none; } .naver{ width: 100%; position:relative; }.images{position:relative;width: 100%;height: 400px; } .images img{position:absolute;left: 0;top: 0;width: 100%;height: 400px;opacity: 0;filter:alpha(opacity=0);transition:opacity .5s; } /*圖片切換之前有漸變的效果*/ .images img.current{opacity:1;filter:alpha(opacity=100); } .icon-list{position:absolute;left:43%;bottom:30px;z-index:1;width: 200px;border-radius:30px;height:35px;background-color:hsla(0,0%,100%,.4); } .icon-list span{display:inline-block;width: 20px;height: 20px;background-color:#fff;border-radius:50%;margin:8px 12px; } .icon-list span.current{background:pink; } .icon a{position:absolute;top:50%;display:block;width: 40px;height: 40px;line-height:40px;text-align:center;color:rgba(255,255,255,.4);filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#66ffffff,endcolorstr=#66ffffff);background:rgba(0,0,0,.4);filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#66000000,endcolorstr=#66000000);font-size:36px;font-weight:bold; } .icon a:hover{color:rgba(255,255,255,.8);filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#c8ffffff,endcolorstr=#c8ffffff);background:rgba(0,0,0,.8);filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#c8000000,endcolorstr=#c8000000);/*為了讓IE兼容rgba*/ } .icon a#prev{left:10px; } .icon a#next{right:10px; }

HTML部分

<div class="naver clear"><div class="images"><img src="./images/01.jpg" class="current" ><img src="./images/02.jpg" alt="" ><img src="./images/03.jpg" alt="" ><img src="./images/04.png" alt="" ></div><div class="icon-list"><span class="current" index="0"></span><span index="1"></span><span index="2"></span><span index="3"></span></div><div class="icon"><a href="#" id="prev">&lt;</a><a href="#" id="next">&gt;</a></div> </div>

JavaScript設置

<script>//獲取響應的元素var naver = document.querySelector(".naver");var iconList = document.querySelectorAll(".icon-list span");var prev = document.querySelector("#prev");var next = document.querySelector("#next");//定義循環變量var m = 1;//定時函數function runPlay(){if (m > 3) {m = 0;}controlImage(m)m ++;}var timer = setInterval(runPlay, 3000);//滑過輪播圖，定時停止naver.onmouseover = function(){clearInterval(timer);//顯示按鈕prev.style.display = "block";next.style.display = "block";}naver.onmouseout = function(){timer = setInterval(runPlay, 3000);//隱藏按鈕prev.style.display = "none";next.style.display = "none";}//被每一個 控制按鈕綁定 鼠標滑過 事件for (var i = 0; i < iconList.length; i ++) {iconList[i].onmouseover = function(){var index = parseInt(this.getAttribute("index"));controlImage(index);m = index + 1;}}//點擊向右的按鈕next.onclick = function(){if (m > 3) {m = 0;}controlImage(m);m ++;}//點擊向左的按鈕prev.onclick = function(){m -= 2;if (m < 0) {m = 3;}controlImage(m);m ++;}//控制圖片的變化function controlImage(n){//獲取所有a的集合var aImgs = document.querySelectorAll(".images img");//所有的a刪除類， 第n個添加類for (var i = 0; i < aImgs.length; i ++) {aImgs[i].className = "";iconList[i].className = "";}aImgs[n].className = "current";iconList[n].className = "current";} </script>

jQuery部分

<!-- 兼容IE8以上的 --> <!--[if gt IE 8]><!--> <script src="./js/jquery-3.2.1.min.js"></script> <!--<![endif]--><!-- 兼容包括IE8以下的瀏覽器 --> <!--[if lte IE 8]> <script src="./js/jquery-1.12.4.min.js"></script> <![endif]--><script>// 設置輪播圖樣式 $(function(){//定義循環變量var m=1;//定時函數function runPlay(){if(m > 3){m=0;}controlImage(m);m++;}var timer=setInterval(runPlay,3000);//滑過輪播圖，定時停止，離開定時繼續$(".naver").mouseenter(function(){clearInterval(timer);//顯示按鈕prev.style.display="block";next.style.display="block";}).mouseleave(function(){timer=setInterval(runPlay,3000);//隱藏按鈕prev.style.display="none";next.style.display="none";})//點擊向下的按鈕$("#next").click(function(){if(m > 3){m=0;}controlImage(m);m++;})//點擊向上的按鈕$("#prev").click(function(){m-=2;if(m < 0){m=3;}controlImage(m);m++;})$(".icon-list span").mouseenter(function(){controlImage($(this).index());m = $(this).index() + 1;})//控制圖片的變化function controlImage(n){$(".images img").removeClass("current").eq(n).addClass("current");$(".icon-list span").removeClass("current").eq(n).addClass("current");} })</script>

轉載于:https://www.cnblogs.com/DCL1314/p/7603331.html

總結

以上是生活随笔為你收集整理的用js和jQuery做轮播图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。