运行结果图：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <style> ul, ol { list-style: none;} a {border: none;text-decoration: none;color: inherit;} * {margin: 0;padding: 0;} .clearfix:after{content: '';display: block;clear: both;} .fl-L{ float:left;} .fl-R{ float:right;} body{ background-color: #cccccc; } #baner{ position: relative; width: 800px; height: 450px; margin: 100px auto; /*box-shadow: 0 0 10px fuchsia;*/ overflow: hidden; } /* ul */ #baner #conner .tur{ position: absolute; display: flex; } /* 两边的按钮 */ #baner #conner .btn img{ position: absolute; cursor: pointer; } #baner #conner .btn img:hover{ opacity: 0.6; } #baner #conner .btn{ position: absolute; width: 800px; top: calc(50% - 25px); } #baner #conner .btn img:nth-child(1){ left: 10px; } #baner #conner .btn img:nth-child(2){ right: 10px; } /* 下面的小圆点 */ #baner #conner .bum{ position: absolute; /*border: 1px solid red;*/ bottom: 10px; left: calc(50% - 100px); width: 200px; display: flex; justify-content: space-around; } #baner #conner .bum p{ text-align: center; width: 30px; line-height: 30px; font-size: 30px; font-family: '黑体'; background-color: #cccccc; border-radius: 50%; color: white; cursor: pointer; } #baner #conner .bum .on{ background-color: orangered; } </style> <title>Document</title> <script src="animate.0.1.3.js"></script> </head> <body> <div id="baner"> <div id="conner"> <ul class="tur"> <li> <a href="#"><img src="img/imgs/0.jpg" alt=""></a> </li> <li> <a href="#"><img src="img/imgs/1.jpg" alt=""></a> </li> <li> <a href="#"><img src="img/imgs/2.jpg" alt=""></a> </li> <li> <a href="#"><img src="img/imgs/3.jpg" alt=""></a> </li> <li> <a href="#"><img src="img/imgs/4.jpg" alt=""></a> </li> </ul> <div class="btn"> <img src="img/imgs/btnL.png" alt=""> <img src="img/imgs/btnR.png" alt=""> </div> <div class="bum"> <p class="on">1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </div> </div> </div> <script src="js/jquery-1.11.3/jquery.min.js"></script> <script> /* $(":animated") ----选中在运动的元素 is() 根据选择器、DOM元素或jQuery对象来检测匹配元素集合，如果其中至少有一个元素符号这个给定的表达式就返回true 列（1）： is(".c1") 如果匹配到类名c1就返回true，没有匹配到就返回false 列（2）： is(":animated") 判断是不是在运动，如果运动是返回true 没有运动就返回false */ /* 获取所需元素 */ var oUl = $("#conner .tur"); //ul var aLi = $("#conner .tur li");//li var aBtn = $("#conner .btn img");//获取两边的按钮 var aBum = $("#conner .bum p");//获取小圆点 /* 初始化索引和对象长度 */ var index = 0; var length = aLi.length; console.log(length); /* 克隆第一个元素节点添加到后面 */ oUl.append(aLi.eq(0).clone()); /* 右边的按钮 */ aBtn.eq(1).click(function () { if(oUl.is($(":animated"))) return;/* 解决动画积累 */ index++; oUl.stop(true).animate({left:-800*index},800,function () { if(index >= length){ index = 0; oUl.css({left:0}); } }); change(); }); /* 左边的按钮 */ aBtn.eq(0).click(function () { if(oUl.is($(":animated"))) return;/* 解决动画积累 */ index--; if(index < 0){ index = length-1; oUl.css({left:-800*length}); } oUl.stop(true).animate({left:-800*index},800); change(); }); /* 小圆点变色 */ function change(){ var n = index; if(index === length) n=0; aBum.eq(n).addClass("on").siblings().removeClass("on"); } /* 小圆点击事件 */ aBum.click(function () { $(this).addClass("on").siblings().removeClass("on"); index = $(this).index(); oUl.stop(true).animate({left:-800*index},800); }); </script> </body> </html>
