日期:2014-05-16  浏览次数:20399 次

js向右滚动
<!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>

<style type="text/css">
.rollBox img{border:none;}
.rollBox{width:680px;overflow:hidden;margin:0 auto;}
.rollBox .Cont{width:620px;overflow:hidden;margin:0 auto;padding-top:20px;}
.rollBox .ScrCont{width:10000000px;}
.rollBox .Cont .pic{width:130px;float:left;text-align:center;padding-right:20px;}
*+html .rollBox .Cont .pic{width:130px;float:left;text-align:center;padding-right:30px;}
.rollBox .Cont .pic img{padding:4px;background:#fff;border:1px solid #ccc;display:block;margin:0 auto;}
.rollBox .Cont .pic p{line-height:26px;color:#505050;}
.rollBox .Cont a:link,.rollBox .Cont a:visited{color:#626466;text-decoration:none;}
.rollBox .Cont a:hover{color:#f00;text-decoration:underline;}
.rollBox #List1,.rollBox #List2{float:left;}
.img1,.img2,.Cont{
float:left;}
.img1,.img2{
width:25px;
height:105px;
display:block;
cursor:pointer;
margin-top:20px;
}
.img1{
background-image:url(http://www.51xuediannao.com/uploads/soft/Slide/gundongzhanshi/shqm_left_pic.gif);
background-repeat: no-repeat;
background-position: center center;}
.img2{
background-image:url(http://www.51xuediannao.com/uploads/soft/Slide/gundongzhanshi/shqm_right_pic.gif);
background-repeat: no-repeat;
background-position: center center;
}
 </style>
</HEAD>
<body>
<div class="rollBox">
<a href="javascript:;" onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()" class="img1" hidefocus="true"></a>
  <div class="Cont" id="ISL_Cont">
  <div class="ScrCont">
  <div id="List1">
  <!-- 图片列表 begin -->
  <div class="pic">
  <a href="#" target="_blank"><img src="http://www.51xuediannao.com/uploads/soft/Slide/gundongzhanshi/show_1.jpg" width="130" height="95" /></a>
  <a href="#" target="_blank">相关产品图片浏览001</a>
  </div>
  <div class="pic">
  <a href="#" target="_blank"><img src="http://www.51xuediannao.com/uploads/soft/Slide/gundongzhanshi/show_1.jpg" width="130" height="95" /></a>
  <a href="#" target="_blank">相关产品图片浏览002</a>
  </div>
  <div class="pic">
  <a href="#" target="_blank"><img src="http://www.51xuediannao.com/uploads/soft/Slide/gundongzhanshi/show_1.jpg" width="130" height="95" /></a>
  <a href="#" target="_blank">相关产品图片浏览003</a>
  </div>
  <div class="pic">
  <a href="#" target="_blank"><img src="http://www.51xuediannao.com/uploads/soft/Slide/gundongzhanshi/show_1.jpg" width="130" height="95" /></a>
  <a href="#" target="_blank">相关产品图片浏览004</a>
  </div>