js图片滚动效果时间可随意设定当鼠标移上去时停止

前端技术 2023/09/09 JavaScript 
<%@ page language=\"java\" import=\"java.util.*\" pageEncoding=\"UTF-8\"%>
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\" />
<title>图片滚动</title>
</head>
<body>
<style type=\"text/css\">
<!--
#demo {
background: #FFF;
overflow: hidden;
border: 1px dashed #CCC;
width: 1000px;
}

#demo img {
border: 10px solid #F2F2F2;
}

#indemo {
float: left;
width: 800%;
}

#demo1 {
float: left;
}

#demo2 {
float: left;
}
-->
</style>
<div id=\"demo\">
<div id=\"indemo\">
<div id=\"demo1\">
<a href=\"#\"><img src=\"images/小美景1.jpg\" border=\"0\" />
</a>
<a href=\"#\"><img src=\"images/小美景2.jpg\" border=\"0\" />
</a>
<a href=\"#\"><img src=\"images/小美景3.jpg\" border=\"0\" />
</a>
<a href=\"#\"><img src=\"images/小美景4.jpg\" border=\"0\" />
</a>
<a href=\"#\"><img src=\"images/小美女4.jpg\" border=\"0\" />
</a>
<a href=\"#\"><img src=\"images/小美女2.jpg\" border=\"0\" />
</a>
</div>
<div id=\"demo2\"></div>
</div>
</div>
<script>
var speed=50;
var tab=document.getElementById(\"demo\");
var tab1=document.getElementById(\"demo1\");
var tab2=document.getElementById(\"demo2\");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
</script>
</body>
</html>

本文地址：https://www.stayed.cn/item/23473

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案