js向右滚动,该如何处理
日期：2014-05-16 浏览次数：20364 次
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>
<!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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
