遇到个滚动问题解决不了
时间：2010-05-21
来源：互联网
学习JavaScript做了个滚动的，但是在ie6下有点问题了，左右滚动时最后一张图片显示不出来，而且有一个空白的位置，
贴代码希望能解决下。不知道怎么在代码弄上图片
scroll_1.jpg (16.75 KB)
scroll_2.jpg (17.65 KB)
scroll_3.jpg (19.6 KB)
scroll_4.jpg (19.41 KB)
贴代码希望能解决下。不知道怎么在代码弄上图片
<!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> .txt_scroll_tb{height:18px;overflow:hidden;width:400px;} .txt_scroll_tb a{display:block;line-height:18px;text-decoration:none;} .txt_scroll_lr{height:18px;overflow:hidden;width:300px;} .txt_scroll_lr a{float:left;display:block;line-height:18px;text-decoration:none;width:300px;} .img_scroll_tb{height:196px;overflow:hidden;width:400px;} .img_scroll_tb img{border:none;} .img_scroll_lr{height:196px;overflow:hidden;width:300px;} .img_scroll_lr a{float:left;} .img_scroll_lr img{border:none;float:left;} </style> </head> <body> <div id="div1" class="txt_scroll_tb" style="height:18px;"> <a href="javascript:">1请教高手看看ie6左右滚动最后面的图片显示不了</a> <a href="javascript:">2请教高手看看ie6左右滚动最后面的图片显示不了</a> <a href="javascript:">3请教高手看看ie6左右滚动最后面的图片显示不了</a> <a href="javascript:">4请教高手看看ie6左右滚动最后面的图片显示不了</a> <a href="javascript:">5请教高手看看ie6左右滚动最后面的图片显示不了</a> <a href="javascript:">6请教高手看看ie6左右滚动最后面的图片显示不了</a> <a href="javascript:">7请教高手看看ie6左右滚动最后面的图片显示不了</a> </div> <p></p> <div id="div2" class="txt_scroll_tb" style="height:18px;"> <a href="javascript:">1请教高手看看ie6左右滚动最后面的图片显示不了</a> <a href="javascript:">2请教高手看看ie6左右滚动最后面的图片显示不了</a> <a href="javascript:">3请教高手看看ie6左右滚动最后面的图片显示不了</a> <a href="javascript:">4请教高手看看ie6左右滚动最后面的图片显示不了</a> <a href="javascript:">5请教高手看看ie6左右滚动最后面的图片显示不了</a> <a href="javascript:">6请教高手看看ie6左右滚动最后面的图片显示不了</a> <a href="javascript:">7请教高手看看ie6左右滚动最后面的图片显示不了</a> </div> <p></p> <div id="div3" class="txt_scroll_lr" style="width:300px;"> <div> <a href="javascript:">1请教高手看看ie6左右滚动最后面的图片显示不了</a> <a href="javascript:">2请教高手看看ie6左右滚动最后面的图片显示不了</a> <a href="javascript:">3请教高手看看ie6左右滚动最后面的图片显示不了</a> <a href="javascript:">4请教高手看看ie6左右滚动最后面的图片显示不了</a> <a href="javascript:">5请教高手看看ie6左右滚动最后面的图片显示不了</a> <a href="javascript:">6请教高手看看ie6左右滚动最后面的图片显示不了</a> <a href="javascript:">7请教高手看看ie6左右滚动最后面的图片显示不了</a> </div> </div> <p></p> <div id="div4" class="txt_scroll_lr" style="width:300px;"> <div> <a href="javascript:">1请教高手看看ie6左右滚动最后面的图片显示不了</a> <a href="javascript:">2请教高手看看ie6左右滚动最后面的图片显示不了</a> <a href="javascript:">3请教高手看看ie6左右滚动最后面的图片显示不了</a> <a href="javascript:">4请教高手看看ie6左右滚动最后面的图片显示不了</a> <a href="javascript:">5请教高手看看ie6左右滚动最后面的图片显示不了</a> <a href="javascript:">6请教高手看看ie6左右滚动最后面的图片显示不了</a> <a href="javascript:">7请教高手看看ie6左右滚动最后面的图片显示不了</a> </div> </div> <p></p> <div id="div5" class="img_scroll_tb" style="height:196px;"> <a href="javascript:"><img src="scroll_1.jpg" height="196" /></a> <a href="javascript:"><img src="scroll_2.jpg" height="196" /></a> <a href="javascript:"><img src="scroll_3.jpg" height="196" /></a> <a href="javascript:"><img src="scroll_4.jpg" height="196" /></a> </div> <p></p> <div id="div6" class="img_scroll_tb" style="height:196px;"> <a href="javascript:"><img src="scroll_1.jpg" height="196" /></a> <a href="javascript:"><img src="scroll_2.jpg" height="196" /></a> <a href="javascript:"><img src="scroll_3.jpg" height="196" /></a> <a href="javascript:"><img src="scroll_4.jpg" height="196" /></a> </div> <p></p> <div id="div7" class="img_scroll_lr" style="width:300px;"> <div> <a href="javascript:"><img src="scroll_1.jpg" height="196" /></a> <a href="javascript:"><img src="scroll_2.jpg" height="196" /></a> <a href="javascript:"><img src="scroll_3.jpg" height="196" /></a> <a href="javascript:"><img src="scroll_4.jpg" height="196" /></a> </div> </div> <p></p> <div id="div8" class="img_scroll_lr" style="width:300px;"> <div> <a href="javascript:"><img src="scroll_1.jpg" height="196" /></a> <a href="javascript:"><img src="scroll_2.jpg" height="196" /></a> <a href="javascript:"><img src="scroll_3.jpg" height="196" /></a> <a href="javascript:"><img src="scroll_4.jpg" height="196" /></a> </div> </div> <script type="text/javascript"> //元素id 滚动方向f 滚动大小s 停顿时间t function scrolling(id,f,t){ var scrollBox=document.getElementById(id); var toHeight=parseInt(scrollBox.style.height); var toWidth=parseInt(scrollBox.style.width); var t=t||1000; var isscroll=true; scrollBox.onmouseover=function(){isscroll=false}; scrollBox.onmouseout=function(){isscroll=true}; new function(){ if(isscroll){ switch(f){ case "left": var p=scrollBox.getElementsByTagName("a").length; //这里p加上1的话，ie6能显示出来第四张，但是还是有一个空白位置 scrollBox.getElementsByTagName("div").item(0).style.width=p*100+"%"; scrollBox.scrollLeft==scrollBox.scrollWidth-toWidth?scrollBox.scrollLeft=0:scrollBox.scrollLeft+=1; t2=scrollBox.scrollLeft%toWidth==0?t:1; break case "right": var p=scrollBox.getElementsByTagName("a").length; scrollBox.getElementsByTagName("div").item(0).style.width=p*100+"%"; scrollBox.scrollLeft==0?scrollBox.scrollLeft=scrollBox.scrollWidth:scrollBox.scrollLeft-=1; t2=scrollBox.scrollLeft%toWidth==0?t:1; break case "bottom": scrollBox.scrollTop==0?scrollBox.scrollTop=scrollBox.scrollHeight:scrollBox.scrollTop-=1; t2=scrollBox.scrollTop%toHeight==0?t:1; break default: scrollBox.scrollTop==scrollBox.scrollHeight-toHeight?scrollBox.scrollTop=0:scrollBox.scrollTop+=1; t2=scrollBox.scrollTop%toHeight==0?t:1; } } setTimeout(arguments.callee,t2); //setTimeout(arguments.callee,scrollBox.scrollTop%toHeight==0?1000:t); } }; scrolling("div1","top"); scrolling("div2","bottom"); scrolling("div3","left",2000); scrolling("div4","right",2000); scrolling("div5","top"); scrolling("div6","bottom"); scrolling("div7","left",500); scrolling("div8","right",1); </script> </body> </html>
提示：您可以先修改部分代码再运行
[ 本帖最后由 181283777 于 2010-5-21 13:26 编辑 ]
提示：您可以先修改部分代码再运行
附件
scroll_1.jpg (16.75 KB)
2010-5-21 13:17
scroll_2.jpg (17.65 KB)
2010-5-21 13:21
scroll_3.jpg (19.6 KB)
2010-5-21 13:21
scroll_4.jpg (19.41 KB)
2010-5-21 13:21
作者: 181283777 发布时间: 2010-05-21
这个我也不是很懂，等高手吧
作者: shbijiben 发布时间: 2010-05-21
高手都忙去了喇？
作者: 181283777 发布时间: 2010-05-23
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读：74
-
如何安装mysql8.0
阅读：31
-
Word快速设置标题样式步骤详解
阅读：28
-
20+道必知必会的Vue面试题（附答案解析）
阅读：37
-
HTML如何制作表单
阅读：22
-
百词斩可以改天数吗？当然可以，4个步骤轻松修改天数！
阅读：31
-
ET文件格式和XLS格式文件之间如何转化？
阅读：24
-
react和vue的区别及优缺点是什么
阅读：121
-
支付宝人脸识别如何关闭?
阅读：21
-
腾讯微云怎么修改照片或视频备份路径?
阅读：28
