图片横向移动 

<!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>无标题文档</title>
<style type="text/css">
HTML {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    FONT-SIZE: 12px;
    BACKGROUND: #fff;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px;
    FONT-FAMILY: "Arial", "Helvetica", "sans-serif";
    TEXT-ALIGN: center
}
BODY {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    BACKGROUND: #fff;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px auto;
    WIDTH: 1003px;
    PADDING-TOP: 0px
}
A:link {
    FONT-SIZE: 12px;
    COLOR: #464646;
    TEXT-DECORATION: none
}
A:visited {
    FONT-SIZE: 12px;
    COLOR: #464646;
    TEXT-DECORATION: none
}
A:active {
    FONT-SIZE: 12px;
    COLOR: #000000;
    TEXT-DECORATION: underline
}
A:hover {
    FONT-SIZE: 12px;
    COLOR: #000000;
    TEXT-DECORATION: underline
}
.box_border {
    BORDER-RIGHT: #dcdddf 1px solid;
    BORDER-TOP: #dcdddf 1px solid;
    MARGIN-TOP: 1px;
    BACKGROUND: #fff;
    BORDER-LEFT: #dcdddf 1px solid;
    WIDTH: 989px;
    BORDER-BOTTOM: #dcdddf 1px solid;
    TEXT-ALIGN: left
}
.tj {
    PADDING-RIGHT: 10px;
    PADDING-LEFT: 10px;
    BACKGROUND: #f3f4f6;
    PADDING-BOTTOM: 10px;
    WIDTH: 969px;
    PADDING-TOP: 10px;
    TEXT-ALIGN: left
}
.tj LI {
    BORDER-RIGHT: #dcdddf 1px solid;
    PADDING-RIGHT: 3px;
    BORDER-TOP: #dcdddf 1px solid;
    PADDING-LEFT: 3px;
    BACKGROUND: #fff;
    FLOAT: left;
    PADDING-BOTTOM: 3px;
    MARGIN: 0px;
    OVERFLOW: hidden;
    BORDER-LEFT: #dcdddf 1px solid;
    WIDTH: 150px;
    PADDING-TOP: 3px;
    BORDER-BOTTOM: #dcdddf 1px solid;
    WHITE-SPACE: nowrap;
    LIST-STYLE-TYPE: none;
    TEXT-ALIGN: center;
    lfist-style-position: outside
}
.tj IMG {
    BORDER-TOP-WIDTH: 0px;
    BORDER-LEFT-WIDTH: 0px;
    BORDER-BOTTOM-WIDTH: 0px;
    WIDTH: 150px;
    HEIGHT: 178px;
    BORDER-RIGHT-WIDTH: 0px
}
.clear {
    CLEAR: both;
    FONT-SIZE: 1px;
    VISIBILITY: hidden;
    WIDTH: 1px;
    LINE-HEIGHT: 1px
}
.clear6 {
    CLEAR: both;
    FONT-SIZE: 1px;
    VISIBILITY: hidden;
    WIDTH: 1px;
    LINE-HEIGHT: 6px
}
</style>
</head>

<body scroll="no">
<DIV class=box_border>
  <div id=demo style="OVERFLOW: hidden; WIDTH: 990px; COLOR: #ffffff">
    <table cellspacing=1 cellpadding=0 width=990 align=center bgcolor=#ffffff
border=0>
      <tbody>
        <tr>
          <td id=demo1 align=middle><table cellspacing=0 cellpadding=3 width="100%" border=0>
              <tbody>
                <tr>
                  <td class=tj align=middle width=150><li><a href="#"><img
            src="nygxcn/images/ad1.png"></a><br>
                      <a
            href="#">男人帮Amaia比基尼杂志照</a></li></td>
                  <td class=tj align=middle width=150><li><a href="#"><img
            src="nygxcn/images/ad3.png"></a><br>
                      <a
            href="#">Leah Dizon写真壁纸</a></li></td>
                  <td class=tj align=middle width=150><li><a href="#"><img
            src="nygxcn/images/buy.png"></a><br>
                      <a
            href="#">世界环保裸骑大赛</a></li></td>
                  <td class=tj align=middle width=150><li><a href="#"><img
            src="nygxcn/images/content_img.png"></a><br>
                      <a
            href="#">11位明星热辣泳装大比拼</a></li></td>
                  <td class=tj align=middle width=150><li><a href="#"><img
            src="nygxcn/images/footerpic.png"></a><br>
                      <a
            href="#">比基尼性感也要与众不同</a></li></td>
                  <td class=tj align=middle width=150><li><a href="#"><img
            src="nygxcn/images/joinShop.png"></a><br>
                      <a
            href="#">Armani闲妆淡匀
                      唇“色”出彩</a></li></td>
                  <td class=tj align=middle width=150><li><a href="#"><img
            src="nygxcn/images/buy.png"></a><br>
                      <a
            href="#">花湖：又寂寞，又美丽</a></li></td>
                </tr>
              </tbody>
            </table></td>
          <td id=demo2></td>
        </tr>
      </tbody>
    </table>
    <div align=center> 
      <script language=JavaScript>
var speed=40;
demo2.innerHTML=demo1.innerHTML; //克隆demo1为demo2
function Marquee(){
 if(demo2.offsetWidth  <= demo.scrollLeft){ //当滚动至demo1与demo2交界时
  demo.scrollLeft = demo.scrollLeft - demo1.offsetWidth;  //demo跳到最顶端
 }
 else{
  demo.scrollLeft++;
 }
}
var MyMar=setInterval(Marquee,speed); //设置定时器
demo.onmouseover=function() {clearInterval(MyMar);}//鼠标移上时清除定时器达到滚动停止的目的
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed);}//鼠标移开时重设定时器
  </script> 
    </div>
    <div class=clear></div>
  </div>
</DIV>
</body>
</html>

 

posted @ 2013-03-24 11:04  Akishimo  阅读(290)  评论(0)    收藏  举报