用js和jQuery做輪播圖

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>