html5 图片横向滑动效果,JS实现图片横向滚动效果示例代码

图片横向滚动代码

.box{ margin:0 auto; height:70px; width:810px; padding:10px; border:1px solid #FF0000; }

.box img{ margin-right:20px;}

#goleft {width: 800px;height: 70px;overflow: hidden;}

#goleft #gols {width: 33100px;}

#goleft1, #goleft2 {width: auto;float: left;}

//图片滚动JS代码

var speed2=20;

var FGgoleft=document.getElementById('goleft');

var FGgoleft1=document.getElementById('goleft1');

var FGgoleft2=document.getElementById('goleft2');

FGgoleft2.innerHTML=FGgoleft1.innerHTML

function Marquee2(){

if(FGgoleft2.offsetWidth-FGgoleft.scrollLeft<=0)

{

FGgoleft.scrollLeft-=FGgoleft1.offsetWidth

}

else{

FGgoleft.scrollLeft++;

}

}

var MyMar2=setInterval(Marquee2,speed2)

FGgoleft.οnmοuseοver=function() { clearInterval(MyMar2) }

FGgoleft.οnmοuseοut=function() { MyMar2=setInterval(Marquee2,speed2) }

效果：