夏易网络

您的当前位置:首页 > 新闻动态 > 网站建设学堂 >

图片不间断向左滚动JS代码

2017-08-11 23:24:54   来源:   评论:0 点击:
<!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=utf-8" />
<title>图片不间断向左滚动JS代码</title>
<style type="text/css">
*{ padding:0px; margin:0px; border:none; list-style:none;}
#demo{width:728px; height:60px; overflow:hidden; margin:0px auto}
#demo ul{ width:1160px;}
#marquePic1,#marquePic2{width:1160px; float:left; height:60px;}
.mydemo{ width:2320px;}
#demo ul li{ width:232px; float:left; line-height:60px;height:60px; }
#demo ul li img{ width:232px; height:60px;}
</style>
</head>
<body>
<div id="demo">
<div class="mydemo">
<div id="marquePic1">
<ul>
<li><a href="#"><img src="http://www.nnxiayi.com/myfile/images/xy001.png" alt="图片不间断向左滚动JS代码" /></a></li>
<li><a href="#"><img src="http://www.nnxiayi.com/myfile/images/xy001.png" alt="图片不间断向左滚动JS代码" /></a></li>
<li><a href="#"><img src="http://www.nnxiayi.com/myfile/images/xy001.png" alt="图片不间断向左滚动JS代码" /></a></li>
<li><a href="#"><img src="http://www.nnxiayi.com/myfile/images/xy001.png" alt="图片不间断向左滚动JS代码" /></a></li>
<li><a href="#"><img src="http://www.nnxiayi.com/myfile/images/xy001.png" alt="图片不间断向左滚动JS代码" /></a></li>
</ul>
</div>
<div id="marquePic2"></div>
</div>
</div>
<script type="text/javascript">
var speed=5;
marquePic2.innerHTML=marquePic1.innerHTML;
function Marquee(){
if(demo.scrollLeft>=marquePic1.scrollWidth){
demo.scrollLeft=0;
}else{
demo.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</body>
</html>
新闻动态
网站建设学堂
网站优化学堂
网络行业新闻
夏易网络动态
推荐文章
如何查看网站哪些图片或文件影响网站打开速度?
如何让网站打开速度更快之图片压缩
大型企业网站建设需要注意的几个问题
高端企业网站建设PK低端企业网站建设
网站SEO优化是什么意思?
  • 网建
  • 优化
  • 资讯
  • 案列
  • 客服 有事点这里 有事点这里