用jQuery实现简单的简单的轮播图
图片来源
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } ul{ list-style-type: none; } .outer{ margin: 50px auto; width: 590px; height: 470px; position: relative; } .img li{ position: absolute; top: 0; left: 0; } .num{ position: absolute; bottom: 20px; text-align: center; width: 100%; } .num li{ display: inline-block; height: 20px; width: 20px; background-color: gray; color: #ffffff; text-align: center; line-height: 20px; border-radius:50% ; margin: 0 10px; } .btn{ position: absolute; height: 60px; width: 30px; background-color: gray; color: #ffffff; text-align: center; line-height: 60px; top: 50%; margin-top: -30px; display: none; opacity: 0.8; } .left_btn{ left: 0; } .rigth_btn{ right: 0; } .outer:hover .btn{ display:block ; } .current{ background-color: red!important; /*设置优先级*/ } {# .num .current{#} {# background-color: red#} {#}#} </style> </head> <body> <div class="outer"> <ul class="img"> <li><img src="img/1.jpg"></li> <li><img src="img/2.jpg"></li> <li><img src="img/3.jpg"></li> <li><img src="img/4.jpg"></li> <li><img src="img/5.jpg"></li> <li><img src="img/6.jpg"></li> </ul> <ul class="num"> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <div class="left_btn btn"> < </div> <div class="rigth_btn btn"> > </div> </div> <script src="jquery-3.3.1.min.js"></script> <script> var i=0; $(".num li").mouseover(function () { $(this).addClass("current").siblings().removeClass('current'); var index=$(this).index(); i=index;//解决一个bug（当鼠标放到outer图上时，定时器是停止，鼠标再指到current的某个数字，图片就要开始从 //那里开始轮播，如果没有i=index，图片会从最原先定时器停止的位置的开始轮播。 $(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000); }) var time=setInterval(move,1000); //eq() 方法将匹配元素集缩减值指定 index 上的一个。 //stop() 方法用于在动画或效果完成前对它们进行停止 function move() { i++ $(".num li").eq(i).addClass("current").siblings().removeClass('current'); var index=$(this).index(); $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); if(i==6){ i=-1 } } //当鼠标放到页面上时，停止定时器，离开开启定时器函数hover // hover(over,out)一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。 $(".outer").hover(function () { clearInterval(time) },function () { time=setInterval(move,1000) }) /****************点击左右按钮******************/ $(".rigth_btn").click(function () { move() }) $(".left_btn").click(function () { move_left() }) function move_left() { if(i==0){ i=6 } i-- $(".num li").eq(i).addClass("current").siblings().removeClass('current') var index=$(this).index(); $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); } </script> </body> </html>
京东的首页
