? ?css
? ? ? *{
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? }
? ? ? ? .div1{
? ? ? ? ? ? list-style: none;
? ? ? ? ? ? margin: 100px auto;
? ? ? ? ? ? ? width: 712px;
? ? ? ? ? ? ? height: 108px;
? ? ? ? ? ? ? background: red;
? ? ? ? ? ? ? position: relative;
? ? ? ? ? ? ? overflow: hidden;
? ? ? ? }
? ? ? ? .div1 ul{
? ? ? ? ? ? list-style: none;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? left: 0;
? ? ? ? ? ? top: 0;
? ? ? ? }
? ? ? ? .div1 ul li{
? ? ? ? ? ? float: left;
? ? ? ? ? ? width: 178px;
? ? ? ? ? ? height: 108px;
? ? ? ? }
html
js部分
? ? var oUl = document.getElementsByTagName('ul')[0];
? ? var aLi = oUl.getElementsByTagName('li');
? ? var aBtn1 = document.querySelector('#btn1')
? ? var aBtn2 = document.querySelector('#btn2')
? ? var timer = null;
? ? var a;
? ? oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
? ? oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
? ? autoPlay(-5);
? ? ? function autoPlay(speed){
? ? ? ? ? clearInterval(timer)
? ? ? ? ? timer = setInterval(function(){
? ? ? ? if(oUl.offsetLeft <= -oUl.offsetWidth/2){
? ? ? ? ? ? oUl.style.left=0;
? ? ? ? }
? ? ? ? else if(oUl.offsetLeft >=0){
? ? ? ? ? ? oUl.style.left=-oUl.offsetWidth/2+'px';
? ? ? ? }
? ? ? ? oUl.style.left=oUl.offsetLeft+speed+'px';
? ? ? ? a=speed;
? ? ? ? ? },10)
? ? ? }
? ? oUl.onmouseover=function(){
? ? ? clearInterval(timer);
? ? }
? ? oUl.onmouseout=function(){
? ? ? if(a>0){
? ? ? ? autoPlay(5);
? ? ? }
? ? ? else{
? ? ? ? autoPlay(-5);
? ? ? }
? ? }
? ? aBtn2.onclick=function(){
? ? ? ? autoPlay(5);
? ? }
? ? aBtn1.onclick=function(){
? ? ? ? autoPlay(-5);
? ? }
