<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } ul,ol { list-style: none; } img { display: block; } .slider { width: 490px; height: 170px; border: 1px solid #ccc; margin: 100px auto; padding: 5px; position: relative; } .inner { width: 100%; height: 100%; background-color: pink; position: relative; overflow: hidden; } .inner ul { width: 1000%; position: absolute; top: 0; left: 0; } .inner ul li { float: left; } .slider ol { position: absolute; left: 50%; bottom: 10px; } .slider ol li { float: left; width: 18px; height: 18px; background-color: #fff; margin-right: 10px; text-align: center; line-height: 18px; cursor: pointer; } .slider ol li.current { background-color: orange; } </style> </head> <body> <div class="slider" id="slider"> <div class="inner"> <ul id="box"> <li><a href="#"><img src="images/01.jpg" alt=""/></a></li> <li><a href="#"><img src="images/02.jpg" alt=""/></a></li> <li><a href="#"><img src="images/03.jpg" alt=""/></a></li> <li><a href="#"><img src="images/04.jpg" alt=""/></a></li> <li><a href="#"><img src="images/05.jpg" alt=""/></a></li> </ul> </div> <ol id="bt"> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div> </body> </html> <script src="common.js"></script> <script> var index = 0; var moveTimer = null; var olist = $id("bt").children; var ulist = $id("box").children; moveTimer = setInterval(autoPlay,1500); function autoPlay(){ index++; for(var i = 0;i < olist.length;i++){ olist[i].className = ""; } if(index == olist.length){ index = 0; } olist[index].className = "current"; move($id("box"),-index * ulist[0].offsetWidth); } for(let i = 0;i < olist.length;i++){ olist[i].onmouseover = function(){ clearInterval(moveTimer); index = i - 1; autoPlay(); } olist[i].onmouseout = function(){ moveTimer = setInterval(autoPlay,1500); } } function move(obj,target){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed = (target - obj.offsetLeft) / 10; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if(target == obj.offsetLeft){ clearInterval(obj.timer); }else{ obj.style["left"] = obj.offsetLeft + speed + "px"; } },30); } </script>
引入的common.js文件
//定义一个函数 功能是根据id查找页面元素 function $id( id ){ return document.getElementById( id ); } //创建元素 function create(ele){ return document.createElement(ele); } //获取任意区间的整数值 function rand( min , max ){ return Math.round( Math.random()*(max-min) + min ); } //随机获取六位十六进制颜色值 function getColor(){ var str = "0123456789abcdef"; var color = "#"; for( var i = 1 ; i <= 6 ; i++ ){ color += str.charAt( rand(0,15) ); } return color; } //自定义日期时间格式 function dateToString(now,sign){ //默认日期的间隔符为 - 如果用户传递的是/ 就使用/ . 如果用户不传递任何参数 默认是- sign = sign || "-"; var y = now.getFullYear(); var m = toTwo( now.getMonth()+ 1 ) ; var d = toTwo( now.getDate() ); var h = toTwo( now.getHours() ); var _m = toTwo( now.getMinutes() ); var s = toTwo( now.getSeconds() ) ; var str = y + sign + m + sign + d + " " + h + ":" + _m + ":" + s; return str; } //判断得到的结果是否小于10 如果小于10，前面拼接0 function toTwo(val){ return val < 10 ? "0"+val : val; } //验证码 ： 字母和数字组成 function yzm(){ //小写字母 大写字母 数字 //48--122 随机获取一个code值 判断编码值如果在 58--64 91--96 两个区间，就重新抽取 //如果不在上面的两个区间内，就将code转成字符， 拼接到字符串中 var str = "";//拼接6位的验证码 for( var i = 1 ; i <= 6 ; i++ ){ var code = rand( 48 , 122 ); if( code >= 58&&code <= 64 || code >= 91 && code <= 96 ){ //就重新抽一次 i--; }else{ var ch = String.fromCharCode( code ); str += ch; } } return str; } //碰撞函数 function pz(d1,d2){ R1 = d1.offsetWidth+d1.offsetLeft; L1 = d1.offsetLeft; T1 = d1.offsetTop; B1 = d1.offsetHeight + d1.offsetTop; R2 = d2.offsetWidth+d2.offsetLeft; L2 = d2.offsetLeft; T2 = d2.offsetTop; B2 = d2.offsetHeight + d2.offsetTop; //如果碰不上 返回false if( R1 < L2 || B1 < T2 || T1 > B2 || L1 > R2 ){ return false; }else{ return true; } }