html中图片自动循环滚动代码,JavaScript代码实现图片循环滚动效果

(2)编写自定义的JavaScript函数move()，用于实现无间断的图片循环滚动效果。speed数值越大图片滚动的越快，具体代码如下：

var speed=30 ; //设置间隔时间

marquePic2.innerHTML=marquePic1.innerHTML;

var demo=document.getElementById(“demo”); //获取demo对象

function Marquee(n){ //实现图片循环滚动的方法

if(marquePic1.offsetWidth-demo.scrollLeft<=0){

demo.scrollLeft=0;

}

else{

demo.scrollLeft=demo.scrollLeft+n;

}

}

var MyMar=setInterval(“Marquee(5)”,speed);

demo.οnmοuseοver=function() { //停止滚动

clearInterval(MyMar);

}

demo.οnmοuseοut=function() { //继续滚动

MyMar=setInterval(“Marquee(5)”,speed);

}

知识点补充：javascript实现页面的自动循环滚动

首先html代码

这是一个通过js自动添加list的div容器，随着名单的长度增加会自动增加scrollheight，而整个div是固定的宽高，通过css的overflow：scroll属性自动将多出的内容隐藏在scrollview里面

css代码如下，这里同时使用：：-webkit-scrollbar将滚动条隐藏以保证美观性

#content{

width:430px;height:490px;

position:absolute; top:180px;left:40%;

font-size:20px;overflow:scroll;

}

#content::-webkit-scrollbar{display:none}

ol{font-size:35px}

li{font-size:25px}

接下来就是实现自动循环滚动的js代码

原理就是先读取div元素的高度以及div内部内容的高度即clientHeight和scrollHeight属性来确定滚动条到顶部的最大距离h=clientHeight-scrollHeight，然后通过setInterval来实现滚动条到顶部的距离scrollTop属性的从0开始递增直到达到最大距离h，然后再将scrollTop归零，重新开始滚动

$(document).ready(function(){

content=document.getElementById(‘content’)

clientheight=content.clientHeight

offsetheight=content.scrollHeight

h=offsetheight-clientheight

var position=0

function startscroll(){

if(content.scrollTop

if(content.scrollTop>=h){content.scrollTop=0;position=0}

}

setInterval(startscroll,100)

console.log(clientheight)

console.log(offsetheight)

})

总结

以上所述是小编给大家介绍的JavaScript代码实现图片循环滚动效果的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

全栈程序员-用户IM

0 0

生成海报