<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0;padding: 0;} ul,li{list-style: none;} img{border: none;} #scroll{margin: 0px auto;width: 180px;height: 110px; position: relative;overflow: hidden;} #scroll ul{width: 720px;height: 110px; position: absolute;left: 0px;top: 0px;} #scroll ul li{float: left;} #scroll li:hover{padding: 2px;} </style> <script src="js/hcgd.js"></script> </head> <body> <div id="scroll"> <ul > <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> </ul> </div> </body> </html>
window.onload=function() { var oDiv=document.getElementById('scroll'); var oUl=oDiv.getElementsByTagName('ul')[0]; var aLi=oUl.getElementsByTagName('li'); var dots = document.querySelectorAll(".dot li"); var imgs = document.querySelectorAll(".scroll>li"); var timer = null; var ispeed=5; var Width=178; oUl.innerHTML+=oUl.innerHTML; oUl.style.width=aLi[0].offsetWidth*aLi.length+'px'; startMove(); //页面渲染完成自动滚动 oDiv.onmouseover=function(){ clearInterval(timer); timer=null; } oDiv.onmouseout=function(){ startMove(); //指针移除后图片自动重播 } function startMove(){ //自定义函数让图片轮播 timer=setInterval(function(){ if(oUl.offsetLeft>-oUl.offsetWidth/2){ ispeed=(Width+oUl.offsetLeft)/8; ispeed=Math.ceil(ispeed); oUl.style.left=oUl.offsetLeft-ispeed+'px'; } else{ oUl.style.left='0px'; oUl.offsetLeft='0px'; Width=178;} if(ispeed<=0) {ispeed=5; Width=Width+178;} },50); } }