轮播效果：点击下一个按钮跳转到下一张图片，点击上一个按钮跳转到上一个图片；鼠标移进图片轮播停止，鼠标移出则自动轮播。 1.HTML代码
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>轮播图</title> | |
| <style type="text/css"> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| #container { | |
| width: 1000px; | |
| height: 380px; | |
| position: relative; | |
| margin: 20px auto; | |
| overflow: hidden; | |
| } | |
| #list { | |
| width: 7000px; | |
| height:380px; | |
| position: absolute; | |
| z-index: 1; | |
| } | |
| #list img { | |
| float: left; | |
| display: block; | |
| } | |
| #pre { | |
| background: url(../images/左箭头.png) no-repeat; | |
| width: 30px; | |
| height: 30px; | |
| float: left; | |
| position: absolute; | |
| top: 190px; | |
| left: 10px; | |
| cursor: pointer; | |
| display: none; | |
| z-index: 999; | |
| } | |
| #next { | |
| background: url(../images/右箭头.png) no-repeat; | |
| width: 30px; | |
| height: 30px; | |
| float: right; | |
| position: absolute; | |
| top: 190px; | |
| right: 10px; | |
| cursor: pointer; | |
| display: none; | |
| z-index: 999; | |
| } | |
| #container:hover #pre, | |
| #container:hover #next { | |
| display: block; | |
| } | |
| #pre:hover, | |
| #next:hover { | |
| background-color: rgba(0, 0, 0, 0.7); | |
| } | |
| #dot { | |
| width: 1000px; | |
| height: 10px; | |
| position: absolute; | |
| bottom: 15px; | |
| left: 450px; | |
| z-index: 10; | |
| } | |
| #dot span { | |
| width: 10px; | |
| height: 10px; | |
| display: block; | |
| border-radius: 10px; | |
| background-color: #fff; | |
| margin: 0 5px; | |
| float: left; | |
| cursor: pointer; | |
| } | |
| #dot .on { | |
| background-color: #69aaec; | |
| } | |
| </style> | |
| </head> | |
| <!-- js代码 --> | |
| <script src="../js/jquery-3.2.1.min.js"></script> | |
| <script type="text/javascript"> | |
| window.onload=()=>{ | |
| //定义变量 | |
| //注意选择器的。或者# | |
| let container=$("#container"); | |
| let pre_btn=$("#pre"); | |
| let next_btn=$("#next"); | |
| let list=$("#list"); | |
| let dots=$("#dot span"); | |
| let index=0;//图片的下标 | |
| let int=null;//int是什么：接收定时器返回的数值 | |
| //总：先写事件，后写方法 | |
| // 1.下一个按钮的事件 | |
| // 2.上一个按钮事件 | |
| // 3.小圆点点击事件 | |
| // 4.鼠标移动图片悬停事件 | |
| // 5.核对小圆点与图片对应的方法 | |
| // 6.图片自动轮播的方法 | |
| //下一张图片的按钮的点击事件 | |
| next_btn.click(function(){ | |
| // $('#list').is(':animated') 检查元素是否在执行动画中，没有在执行动画返回为false反则返回true | |
| console.log($('#list').is(':animated')) | |
| if($('#list').is(':animated')){ | |
| return false; | |
| } | |
| //判断下一张图片往左走 | |
| index=++index>4?0:index; | |
| //此处的-1000的负号是代表往左走 | |
| let new_left=-1000*index; | |
| //判断好了就实行动画方法，让它动！ | |
| list.animate({"left":new_left+'px'},1000,checkDots); | |
| }) | |
| //上一张图片的按钮的点击事件 | |
| pre_btn.click(function(){ | |
| // $('#list').is(':animated') 检查元素是否在执行动画中，没有在执行动画返回为false反则返回true | |
| console.log($('#list').is(':animated')) | |
| if($('#list').is(':animated')){ | |
| return false; | |
| } | |
| //判断图片的逻辑 | |
| index=--index<0?4:index; | |
| //生成新的图片位置 | |
| let new_left=-1000*index; | |
| //谁动起来 | |
| list.animate({"left":new_left+'px'},1000,checkDots); | |
| }) | |
| //小圆点点击,对应图片事件 | |
| dots.click(function(){ | |
| // $('#list').is(':animated') 检查元素是否在执行动画中，没有在执行动画返回为false反则返回true | |
| if ($('#list').is(':animated')) { | |
| return false; | |
| } | |
| //小圆点当前点击，用数组包起来 | |
| index=$(this).attr("data-index"); | |
| let new_left=-1000*index; | |
| list.animate({"left":new_left+'px'},1000,checkDots) | |
| //小圆点点击后，怎么移动的 | |
| }) | |
| //鼠标点击容器，图片悬停事件 | |
| container.hover(function(){ | |
| //鼠标移进去的时候清除定时器 | |
| clearInterval(int) | |
| },function(){ | |
| //鼠标移出去的时候自动播放动画 | |
| autoPlay(); | |
| }) | |
| //检查是否对应焦点方法 | |
| let checkDots=function(){ | |
| //每滑动一次删除掉原来的小圆点类 | |
| dots.removeClass("on"); | |
| //再添加新的图片对应的小圆点 | |
| dots.eq(index).addClass("on"); | |
| } | |
| //自动轮播方法 | |
| function autoPlay(){ | |
| int =setInterval(function(){ | |
| next_btn.click(); | |
| },2000) | |
| } | |
| } | |
| </script> | |
| <body> | |
| <div id="container"> | |
| <div id="pre"></div> | |
| <div id="next"></div> | |
| <div id="list" style="left:0px"> | |
| <a href="#"><img src="../images/ts-01.jpg" width="1000"></a> | |
| <a href="#"><img src="../images/ts-02.jpg" width="1000"></a> | |
| <a href="#"><img src="../images/ts-03.jpg" width="1000"></a> | |
| <a href="#"><img src="../images/ts-04.jpg" width="1000"></a> | |
| <a href="#"><img src="../images/ts-01.jpg" width="1000"></a> | |
| </div> | |
| <div id="dot"> | |
| <span data-index="0" class="on"></span> | |
| <span data-index="1"></span> | |
| <span data-index="2"></span> | |
| <span data-index="3"></span> | |
| <span data-index="4"></span> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
2.展示效果
