html页面中图片滚动,Html网页图片滚动代码

本文介绍了如何使用HTML和JavaScript实现网页中图片的无缝滚动效果。通过设置样式和JavaScript函数,实现了上下左右四个方向的图片滚动,同时支持鼠标悬停时停止滚动,离开时继续滚动的功能。

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

style=overflow:hidden;height:100;width:90;>

%E6%8F%92%E5%85%A5%E9%9C%80%E8%A6%81%E6%BB%9A%E5%8A%A8%E7%9A%84%E5%9B%BE%E7%89%87

%E6%8F%92%E5%85%A5%E9%9C%80%E8%A6%81%E6%BB%9A%E5%8A%A8%E7%9A%84%E5%9B%BE%E7%89%87

%E6%8F%92%E5%85%A5%E9%9C%80%E8%A6%81%E6%BB%9A%E5%8A%A8%E7%9A%84%E5%9B%BE%E7%89%87

%E6%8F%92%E5%85%A5%E9%9C%80%E8%A6%81%E6%BB%9A%E5%8A%A8%E7%9A%84%E5%9B%BE%E7%89%87

%E6%8F%92%E5%85%A5%E9%9C%80%E8%A6%81%E6%BB%9A%E5%8A%A8%E7%9A%84%E5%9B%BE%E7%89%87

id=butong_net_top2>

var speed=30

butong_net_top2.innerHTML=butong_net_top1.innerHTML

//克隆butong_net_top1为butong_net_top2

function Marquee1(){

//当滚动至butong_net_top1与butong_net_top2交界时

if(butong_net_top2.offsetTop-butong_net_top.scrollTop<=0)&<60;&<60;

butong_net_top.scrollTop-=butong_net_top1.offsetHeight

//butong_net_top跳到最顶端

else{

butong_net_top.scrollTop++;

}

}

var MyMar1=setInterval(Marquee1,speed)//设置定时器

//鼠标移上时清除定时器达到滚动停止的目的

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

//鼠标移开时重设定时器

butong_net_top.οnmοuseοut=function(){MyMar1=setInterval(Marquee1,speed)}

style=overflow:hidden;height:100;width:90;>

%E6%8F%92%E5%85%A5%E9%9C%80%E8%A6%81%E6%BB%9A%E5%8A%A8%E7%9A%84%E5%9B%BE%E7%89%87

%E6%8F%92%E5%85%A5%E9%9C%80%E8%A6%81%E6%BB%9A%E5%8A%A8%E7%9A%84%E5%9B%BE%E7%89%87

%E6%8F%92%E5%85%A5%E9%9C%80%E8%A6%81%E6%BB%9A%E5%8A%A8%E7%9A%84%E5%9B%BE%E7%89%87

%E6%8F%92%E5%85%A5%E9%9C%80%E8%A6%81%E6%BB%9A%E5%8A%A8%E7%9A%84%E5%9B%BE%E7%89%87

%E6%8F%92%E5%85%A5%E9%9C%80%E8%A6%81%E6%BB%9A%E5%8A%A8%E7%9A%84%E5%9B%BE%E7%89%87

id=butong_net_bottom2>

var speed=30

butong_net_bottom2.innerHTML=butong_net_bottom1.innerHTML

butong_net_bottom.scrollTop=butong_net_bottom.scrollHeight

function Marquee2(){

if(butong_net_bottom1.offsetTop-butong_net_bottom.scrollTop>=0)

butong_net_bottom.scrollTop+=butong_net_bottom2.offsetHeight

else{

butong_net_bottom.scrollTop--

}

}

var MyMar2=setInterval(Marquee2,speed)

butong_net_bottom.οnmοuseοver=function()

{clearInterval(MyMar2)}

butong_net_bottom.οnmοuseοut=function()

{MyMar2=setInterval(Marquee2,speed)}

style="overflow:hidden;width:500px;">

border="0">

id="butong_net_left1" valign="top"

align="center">

border="0">

src="

src="插入需要滚动的图片">

src="插入需要滚动的图片">

src="插入需要滚动的图片">

src="插入需要滚动的图片">

src="插入需要滚动的图片">

valign="top">

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

butong_net_left2.innerHTML=butong_net_left1.innerHTML

function Marquee3(){

if(butong_net_left2.offsetWidth-butong_net_left.scrollLeft<=0)

butong_net_left.scrollLeft-=butong_net_left1.offsetWidth

else{

butong_net_left.scrollLeft++

}

}

var MyMar3=setInterval(Marquee3,speed)

butong_net_left.οnmοuseοver=function()

{clearInterval(MyMar3)}

butong_net_left.οnmοuseοut=function()

{MyMar3=setInterval(Marquee3,speed)}

style="overflow:hidden;width:500px;">

border="0">

id="butong_net_right1" valign="top"

align="center">

border="0">

src="插入需要滚动的图片">

src="插入需要滚动的图片">

src="插入需要滚动的图片">

src="插入需要滚动的图片">

src="插入需要滚动的图片">

valign="top">

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

butong_net_right2.innerHTML=butong_net_right1.innerHTML

function Marquee4(){

if(butong_net_right.scrollLeft<=0)

butong_net_right.scrollLeft+=butong_net_right2.offsetWidth

else{

butong_net_right.scrollLeft--

}

}

var MyMar4=setInterval(Marquee4,speed)

butong_net_right.οnmοuseοver=function()

{clearInterval(MyMar4)}

butong_net_right.οnmοuseοut=function()

{MyMar4=setInterval(Marquee4,speed)}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值