SummerRain

软件开发/信息安全
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

[转]JS图片滚动效果

Posted on 2007-06-28 22:31  SummerRain  阅读(4353)  评论(0)  编辑  收藏  举报
From: http://bbs.blueidea.com/thread-2762084-1-1.html

演示效果：http://bbs.blueidea.com/thread-2762084-1-1.html

<!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>家园网 www.wfamilies.com</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
background:#CCC;
}
/*--大块定义--*/
#container{
text-align:left;
width:778px;
overflow:hidden;
background:#fff;
}
#content{
width:778px;
}
/*--休闲一刻--*/
#xxyk{
float:left;
width:778px;
margin:0;
padding:0;
background:#999;
}
#xxyk .content{
float:left;
width:778px;
margin:0;
padding:0 0 20px 0;
}
#xxyk .content img{
border:0;
}
#xxyk .content .roll{
width: 750px;
margin:4px auto;
padding:0 0 0 0; 
overflow:hidden;
}
#xxyk .content .roll #main{
list-style:none;
width:1620px;
padding:0;
margin:0;
}
#xxyk .content .roll #main #pic1,#xxyk .content .roll #main #pic2{
float:left;
text-align:left;
width:810px;
padding:0;
margin:0;
background:#f90;
}
#xxyk .content .roll #main #pic1 a,#xxyk .content .roll #main #pic2 a{
display:block;
text-align:center;
color:#FFFFFF;
width:135px;
}
#xxyk .content .roll #main #pic1 img,#xxyk .content .roll #main #pic2 img{
display:block;
clear:both;
width:115px;
height:111px;
margin:0 auto 5px auto;
padding:0;
}
#xxyk .content .roll #main #pic1 ul,#xxyk .content .roll #main #pic2 ul{
float:left;
list-style:none;
}
#xxyk .content .roll #main #pic1 ul li,#xxyk .content .roll #main #pic2 ul li{
float:left;
display:block;
margin:0;
padding:0;
}
/*--隐藏元素--*/
#slhdly .title,#xxyk .content ul li.more{
position:absolute;
visibility:hidden;
overflow:hidden;
display:none;
clip:rect(0,0,0,0);
height:0;
}
</style>
</head>
<body>
<div id="xxyk">
<div class="content">
<div id="pic" class="roll">
<div id="main">
<div id="pic1">
<ul>
<li><a href="#" target=_blank><img src="http://www.blueidea.com/articleimg/game/cartoon/2007tshirt/2007-5-19/4044_s.jpg" / ></a></li>
<li><a href="#" target=_blank><img src="http://www.blueidea.com/articleimg/game/cartoon/2007tshirt/2007-5-19/4044_s.jpg" / ></a></li>
<li><a href="#" target=_blank><img src="http://www.blueidea.com/articleimg/game/cartoon/2007tshirt/2007-5-19/4044_s.jpg" / ></a></li>
<li><a href="#" target=_blank><img src="http://www.blueidea.com/articleimg/game/cartoon/2007tshirt/2007-5-19/4044_s.jpg" / ></a></li>
<li><a href="#" target=_blank><img src="http://www.blueidea.com/articleimg/game/cartoon/2007tshirt/2007-5-19/4044_s.jpg" / ></a></li>
<li><a href="#" target=_blank><img src="http://www.blueidea.com/articleimg/game/cartoon/2007tshirt/2007-5-19/4044_s.jpg" / ></a></li>
</ul>
</div>
<div id="pic2">
</div>
</div>
</div>
<script type="text/javascript">
             var spe=22;  /*--控制移动速度--*/
                var m = document.getElementById("pic");
                var m1 = document.getElementById('pic1');
                var m2 = document.getElementById('pic2');
                m2.innerHTML = m1.innerHTML;
              function Marquee()
                 {
                  if(m2.offsetWidth-m.scrollLeft<=0)
                  {
                     m.scrollLeft-=m1.offsetWidth;
                  }
                  else
                  {
                   m.scrollLeft++;
               }
           }
                 var k1;
                 function startmarquee()
                 {
                     k1=setInterval(Marquee,spe)                 
                 }
                 window.setTimeout('startmarquee()',1000);
           m.onmouseover=function() {clearInterval(k1)}
           m.onmouseout=function() {k1=setInterval(Marquee,spe)}
               </script>
</div>
</div>
</body>
</html>