html图片滚动暂停,怎么设置鼠标悬停时滚动的图片或文字停止?

HTMLHEADTITLE无标题文档/TITLE

META http-equiv=Content-Type content=text/html; charset=gb2312

META content=MSHTML 6.00.2800.1264 name=GENERATOR

link href=css.css rel=stylesheet type=text/css

/HEAD

BODY leftMargin=0 topMargin=2 marginheight=0 marginwidth=0

CENTER

TABLE

style=BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid

cellSpacing=0 cellPadding=0 width=750 align=center border=0

TBODY

TR

TD

DIV id=demo style=OVERFLOW: hidden; WIDTH: 100%; COLOR: #ffffff

TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace=0

TBODY

TR

TD id=demo1 vAlign=toptable width=1710 height=116 border=0 cellpadding=0 cellspacing=0

tr

td width=171 background=pic_bg.jpgdiv align=center1/div/td

td width=171 background=pic_bg.jpgdiv align=center

p2/p

/div/td

td width=171 background=pic_bg.jpgdiv align=center3/div/td

td width=171 background=pic_bg.jpgdiv align=center4/div/td

td width=171 background=pic_bg.jpgdiv align=center5/div/td

td width=171 background=pic_bg.jpgdiv align=center6/div/td

td width=171 background=pic_bg.jpgdiv align=center7/div/td

td width=171 background=pic_bg.jpgdiv align=center8/div/td

td width=171 background=pic_bg.jpgdiv align=center9/div/td

td width=171 background=pic_bg.jpgdiv align=center10/div/td

/tr

/table/TD

TD id=demo2 vAlign=top /TD/TR/TBODY/TABLE/DIV

SCRIPT

var speed3=25//速度数值越大速度越慢

demo2.innerHTML=demo1.innerHTML

function Marquee(){

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

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++

}

}

var MyMar=setInterval(Marquee,speed3)

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

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

/SCRIPT

/TD/TR/TBODY/TABLE/TD/TR/TABLE

/CENTER

/BODY/HTML

取消

评论

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以通过以下代码实现: HTML结构: ``` <div class="img-container"> <img src="image1.jpg" alt="image1"> <img src="image2.jpg" alt="image2"> <img src="image3.jpg" alt="image3"> <img src="image4.jpg" alt="image4"> <img src="image5.jpg" alt="image5"> </div> ``` CSS样式: ``` .img-container { width: 500px; /*设置容器宽度*/ height: 300px; /*设置容器高度*/ overflow: hidden; /*隐藏溢出部分*/ position: relative; /*设置相对定位*/ } .img-container img { width: 500px; /*设置图片宽度*/ height: 300px; /*设置图片高度*/ position: absolute; /*设置绝对定位*/ top: 0; /*设置顶部位置*/ left: 0; /*设置左侧位置*/ opacity: 0; /*设置透明度为0*/ transition: opacity 0.5s ease-in-out; /*设置渐变动画效果*/ } .img-container img.active { opacity: 1; /*设置透明度为1*/ } .img-container:hover img { opacity: 0.5; /*设置鼠标悬停的透明度*/ } ``` JavaScript代码: ``` var imgs = document.querySelectorAll(".img-container img"); var index = 0; var intervalId; function changeImage() { for (var i = 0; i < imgs.length; i++) { imgs[i].classList.remove("active"); } index++; if (index >= imgs.length) { index = 0; } imgs[index].classList.add("active"); } intervalId = setInterval(changeImage, 2000); var imgContainer = document.querySelector(".img-container"); imgContainer.addEventListener("mouseover", function() { clearInterval(intervalId); }); imgContainer.addEventListener("mouseout", function() { intervalId = setInterval(changeImage, 2000); }); ``` JavaScript代码实现了图片滚动鼠标悬停暂停的效果,您可以根据需要进行修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值