用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>