CSS图片滚动的问题，急求！！
做了个JS图片滚动的效果，可是向左移动时总是多出一个边是怎么回事？急求解！！
补充：是实现的5张图片轮换，像左移动，宽度为800，可是当移到第二张图的时候，最左边会多出第一张图的一点边，继而让第二张图显示不完整，第三张图又会有第二张图的最后一点边，很郁闷，搞不懂怎么回事，测试了下向上移动的话就没问题，而向左就会有问题，求解，大师们快来帮帮忙吧！！
当前位置：编程学习 > html/css >>
答案：<!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"> /*----------------------------------------滚动-----------------------------------------------*/ body{ margin:0px auto; font-size:12px; font-family:宋体;} *{ margin:0px; padding:0px;} a{ color:#666; text-decoration:none;} img,from{ border:none;} a:hover{ color:#333;} dl,dt,dd{ list-style:none;} .rollBox1{width:710px;overflow:hidden;margin:10px 0px 0px 33px; height:auto; border:1px solid #AFD46D; padding:10px 0px;} .rollBox1 .LeftBotton{height:80px;width:23px;background:url(images/buttonL1.jpg) no-repeat;overflow:hidden;float:left;display:inline;margin:0px;cursor:pointer; margin:25px 0px 0px 0px;} .rollBox1 .RightBotton{height:80px;width:23px;background:url(images/buttonR1.jpg) no-repeat;overflow:hidden;float:left;display:inline;margin:0px;cursor:pointer;margin:25px 0px 0px 0px;} .rollBox1 .Cont{width:654px;overflow:hidden;float:left;height: auto;margin:0px 5px; } .rollBox1 .ScrCont{width:10000000px;} .rollBox1 .Cont .pic{width:143px;float:left;margin:0px 10px;} .rollBox1 .Cont .pic img{display:block;width:141px; height:134px;} .rollBox1 .Cont .pic dt{ width:141px; height:134px;overflow:hidden; border:1px solid #ccc;} .rollBox1 .Cont .pic dd{ width:143px; height:20px; line-height:20px; text-align:center;} .rollBox1 .Cont .pic dd a{text-decoration:none; color:#333;} .rollBox1 .Cont .pic dd a:hover{color:#f00;text-decoration:none;} .rollBox1 #List1,.rollBox #List2{float:left;} .rollBox1 #List3,.rollBox #List4{float:left;} </style> </head> <body> <div class="rollBox1"> <div class="LeftBotton" onMouseDown="ISL_GoUp()" onMouseUp="ISL_StopUp()" onMouseOut="ISL_StopUp()"></div> <div class="Cont" id="ISL_Cont"> <div class="ScrCont"> <div id="List1"> <dl class="pic"> <dt><a href="#" target="_blank"><img src="images/tp2.jpg"/></a></dt> <dd><a href="#">Line control candy tank</a></dd> </dl> <dl class="pic"> <dt><a href="#" target="_blank"><img src="images/tp2.jpg"/></a></dt> <dd><a href="#">Line control candy tank</a></dd> </dl> <dl class="pic"> <dt><a href="#" target="_blank"><img src="images/tp2.jpg"/></a></dt> <dd><a href="#">Line control candy tank</a></dd> </dl> <dl class="pic"> <dt><a href="#" target="_blank"><img src="images/tp2.jpg"/></a></dt> <dd><a href="#">Line control candy tank</a></dd> </dl> <dl class="pic"> <dt><a href="#" target="_blank"><img src="images/tp2.jpg"/></a></dt> <dd><a href="#">Line control candy tank</a></dd> </dl> <dl class="pic"> <dt><a href="#" target="_blank"><img src="images/tp2.jpg"/></a></dt> <dd><a href="#">Line control candy tank</a></dd> </dl> </div> <div id="List2"></div> </div> </div> <div class="RightBotton" onMouseDown="ISL_GoDown()" onMouseUp="ISL_StopDown()" onMouseOut="ISL_StopDown()"></div> </div> <script language="javascript" type="text/javascript"> <!--//--><![CDATA[//><!-- //图片滚动列表 5icool.org var Speed = 1; //速度(毫秒) var Space = 5; //每次移动(px) var PageWidth = 143+20; //翻页宽度 143是pic 盒子的宽度，20是pic的外边距 var fill = 0; //整体移位 var MoveLock = false; var MoveTimeObj; var Comp = 0; var AutoPlayObj = null; GetObj("List2").innerHTML = GetObj("List1").innerHTML; GetObj('ISL_Cont').scrollLeft = fill; GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);} GetObj("ISL_Cont").onmouseout = function(){AutoPlay();} AutoPlay(); function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}} function AutoPlay(){ //自动滚动 clearInterval(AutoPlayObj); AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',3000); //间隔时间 } function ISL_GoUp(){ //上翻开始 if(MoveLock) return; clearInterval(AutoPlayObj); MoveLock = true; MoveTimeObj = setInterval('ISL_ScrUp();',Speed); } function ISL_StopUp(){ //上翻停止 clearInterval(MoveTimeObj); if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0){ Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth); CompScr(); }else{ MoveLock = false; } AutoPlay(); } function ISL_ScrUp(){ //上翻动作 if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth} GetObj('ISL_Cont').scrollLeft -= Space ; } function ISL_GoDown(){ //下翻 clearInterval(MoveTimeObj); if(MoveLock) return; clearInterval(AutoPlayObj); MoveLock = true; ISL_ScrDown(); MoveTimeObj = setInterval('ISL_ScrDown()',Speed); } function ISL_StopDown(){ //下翻停止 clearInterval(MoveTimeObj); if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ){ Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill; CompScr(); }else{ MoveLock = false; } AutoPlay(); } function ISL_ScrDown(){ //下翻动作 if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;} GetObj('ISL_Cont').scrollLeft += Space ; } function CompScr(){ var num; if(Comp == 0){MoveLock = false;return;} if(Comp < 0){ //上翻 if(Comp < -Space){ Comp += Space; num = Space; }else{ num = -Comp; Comp = 0; } GetObj('ISL_Cont').scrollLeft -= num; setTimeout('CompScr()',Speed); }else{ //下翻 if(Comp > Space){ Comp -= Space; num = Space; }else{ num = Comp; Comp = 0; } GetObj('ISL_Cont').scrollLeft += num; setTimeout('CompScr()',Speed); } } //--><!]]> </script> </body> </html> 可以试试这个，调一下里面的大小，上面都有相应的注释！
其他：freedowly 回答的很好,我已经使用了,谢谢分享 上一个：<link id="themeCSS" rel="stylesheet" type="text/css" />什么意思。。具体点
下一个：有谁知道CSS3.0中的瀑布流布局？知道的指点下 谢谢
- 更多html/css疑问解答：
- div+css中关于ie浏览器中非啊元素的：hover的实现问题，哪位大神指点下啊
- css jquery代码中为什么宽度这样设定.menu li ul 150px;.menu li ul a 110px;.menu li a中padding的20px
- css 属性选择器 ie6 不支持吗？
- 用css、jquery做的选项卡效果，有一个小疑问，请高手指点，代码如下：
- 介绍本学习css的书
- wordpress多个CSS样式怎么调用？
- 这个div 的css是如何编写的
- div+css中，div的右边框小于div的高度且居中，除了用背景图片，如何实现？
- 表格立体感用CSS怎么写 我要 具体代码 写仔细 分段的 谢谢 了 兄弟 还有 下拉列表框 立体感用CSS 怎么写
- CSS 在一个大的DIV里面，另一个DIV怎么居中并置底。
- dw中html文档为什么无法链接css文档
- 设计一个小例子说明DIV+CSS的优势（例子要解释并注释）。
- 我会html css目前正在学js，打算在大三的寒假找个实习，请问应该找哪方面的实习？
- css问题，跪求大大帮忙
- 请教网页设计高手，如下图的这种css代码怎么写？