html中如何写自动滚动图片,如何在HTML页面中实现图片循环滚动?

本文介绍了一种使用JavaScript实现的网页内容自动滚动效果的方法。通过设置元素的滚动间隔和触发条件,使得网页上的指定内容能够自动从右向左移动。当鼠标悬停在滚动区域时,滚动会暂停;移开鼠标后,滚动继续。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

                    indexpic1.gif

                    indexpic2.gif

                    indexpic3.gif

var speed=30//速度数值越大速度越慢

var demo2 = document.getElementById("demo2");

var demo = document.getElementById("demo");

var demo1 = document.getElementById("demo1");

demo2.innerHTML=demo1.innerHTML

function Marquee(){

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

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++

}

}

var MyMar=setInterval(Marquee,speed)

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

demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}

自己站的效果

你可以访问 http://b1.gd.cn

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值