html 无缝滚动图片,两个非常简单的JS图片无缝滚动代码

图片无缝滚动实现一

图片无缝滚动代码|www.125jz.com

.picutre{overflow: hidden; height: 150px; width: 800px; margin: 0 auto;}

.picutre img{width:200px; height:150px; border:0px;}

/*图片滚动效果*/

var speedpic = 20;//速度数值越大速度越慢

document.getElementById("list2").innerHTML = document.getElementById("list1").innerHTML;

function Marqueepic() {

if (document.getElementById("list2").offsetWidth- document.getElementById("list").scrollLeft <= 0) {

document.getElementById("list").scrollLeft -= document.getElementById("list1").offsetWidth;

} else { document.getElementById("list").scrollLeft++; }

}

var MyMarpic = setInterval(Marqueepic, speedpic);

document.getElementById("list").onmouseover = function() {

clearInterval(MyMarpic);

}

document.getElementById("list").onmouseout = function() {

MyMarpic = setInterval(Marqueepic, speedpic);

}

图片无缝滚动实现二

#demo img{ width:180px; height:125px; border:0px;}

var speed1=15//数值越大速度越慢

demo2.innerHTML=demo1.innerHTML

function Marquee1(){

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else{ demo.scrollLeft++ }

}

var MyMar1=setInterval(Marquee1,speed1)

demo.οnmοuseοver=function() {clearInterval(MyMar1)}

demo.οnmοuseοut=function() {MyMar1=setInterval(Marquee1,speed1)}

本文来自投稿，不代表中国网页设计立场，如若转载，请注明出处：http://www.125jz.com/1181.html