您的位置：首页 > Web前端 > JavaScript

一个兼容大多数浏览器的图片滚动的js

2013-05-23 15:28 501 查看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
/*scroll图片滚动*/
.scroll{ width:950px; height:190px; background:url(../images/title_03.gif) no-repeat left top;}
.s_t{ font-size:14px; font-weight:bold; line-height:35px; color:#303030; text-indent:15px;}
.demo{ width:948px; height:155px; border: 1px solid #d6e3ec; border-top:none;}
#demoa { background: #FFF; height:145px; overflow:hidden;  width: 915px; margin-left:14px; padding-top:10px;}
#demoa ul{ margin-left:4px; float:left; text-align:center;}
#demoa ul li{ float:left; margin:0 5px;}
#demoa img { width:160px; height:125px; padding:5px; border: 1px solid #dddddd;}
#demoa img:hover{ cursor: default;}
#indemoa {float: left;  width: 800%; }
#demo1a {  float: left; }
#demo2a {  float: left; }

</style>
</head>

<body>
<!--scroll-->
<div class="scroll">
<div class="s_t">团队风采</div>
<div class="demo">
<div id="demoa">
<div id="indemoa">
<div id="demo1a" style="height:146px; width:auto">
<ul>
<li><a ><img src="<%=path %>/public/images/img_01.jpg" border="0" width="160px" height="120px" /></a></li>
<li><a ><img src="<%=path %>/public/images/img_01.jpg" border="0" width="160px" height="120px" /></a></li>
<li><a ><img src="<%=path %>/public/images/img_01.jpg" border="0" width="160px" height="120px" /></a></li>
<li><a ><img src="<%=path %>/public/images/img_01.jpg" border="0" width="160px" height="120px" /></a></li>
<li><a ><img src="<%=path %>/public/images/img_01.jpg" border="0" width="160px" height="120px" /></a></li>
</ul>
</div>
<div id="demo2a"></div>
</div>
</div>
</div>
<script>
<!--
var speed=20; //数字越大速度越慢
var tab=document.getElementById("demoa");
var tab1=document.getElementById("demo1a");
var tab2=document.getElementById("demo2a");
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>
</div>
<!--end scroll-->
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

一个兼容大多数浏览器 的 图片滚动的js

一个兼容大多数浏览器的图片滚动的js