要求 图片循环滚动 左右控制,鼠标指针放到图片上显示该图片的名称,下面代码在ie8下正常显示,但在ie6 ie7下显示不正常

问题描述

要求图片循环滚动左右控制,鼠标指针放到图片上显示该图片的名称,下面代码在ie8下正常显示,但在ie6ie7下显示不正常!请各位大侠帮下小弟!另发现在ie8下第一遍图片滚动完毕后第二遍图片下面没有显示文字<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><styletype="text/css">.rollBox{width:980px;overflow:hidden;}.rollBox.LeftBotton{height:127px;width:28px;padding-top:100px;overflow:hidden;float:left;display:inline;margin:0;cursor:pointer;}.rollBox.RightBotton{height:127px;width:28px;overflow:hidden;padding-top:100px;float:left;display:inline;margin:0;cursor:pointer;}.rollBox.Cont{width:924px;overflow:hidden;float:left;}.rollBox.ScrCont{width:10000000px;}.rollBox.Cont.pic{position:relative;list-style:none;width:225px;float:left;margin-right:10px;text-align:center;}.rollBox.Cont.pic.zhushi{color:#fff;font-weight:bold;visibility:hidden;overflow:auto;position:absolute;width:218px;height:30px;line-height:30px;background:#171717;filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;left:3px;top:168px;}.rollBox.Contlia{display:block;}.rollBox.ContLIa:link,#.procate_list.bcLIa:visited,.procate_list.bcLIa:active{color:#000}.rollBox.ContLIa:hover{color:#008aff}.rollBox.Cont.picimg{width:221px;padding:1px;display:block;margin:0auto;}.rollBox.Conta:link,.rollBox.Conta:visited{color:#626466;text-decoration:none;}.rollBox.Conta:hover{color:#f00;}.rollBox#List1,.rollBox#List2{float:left;}</style><scripttype="text/javascript">functionlayer_show(layer_name,action){if(action=="show"){document.getElementById(layer_name).style.visibility="visible";}elseif(action=="hide"){document.getElementById(layer_name).style.visibility="hidden";}}</script><title>无标题文档</title></head><body><divclass="rollBox"><divclass="LeftBotton"onmousedown="ISL_GoUp()"onmouseup="ISL_StopUp()"onmouseout="ISL_StopUp()"><imgsrc="images/left.gif"width="25"height="31"/></div><divclass="Cont"style="margin-top:12px;"id="ISL_Cont"><divclass="ScrCont"><!--图片列表begin--><ulid="List1"><liclass="pic"><divid="zhushi_text"class="zhushi">图片文字</div><ahref="#"><imgsrc="images/tu1.gif"width="225"height="198"onmouseout="layer_show('zhushi_text','hide')"onmouseover="layer_show('zhushi_text','show')"/></a></li><liclass="pic"><divid="zhushi_text1"class="zhushi">图片文字1</div><ahref="#"><imgsrc="images/tu2.gif"width="225"height="198"onmouseout="layer_show('zhushi_text1','hide')"onmouseover="layer_show('zhushi_text1','show')"/></a></li><liclass="pic"><divid="zhushi_text2"class="zhushi">图片文字2</div><ahref="#"><imgsrc="images/tu3.gif"width="225"height="198"onmouseout="layer_show('zhushi_text2','hide')"onmouseover="layer_show('zhushi_text2','show')"/></a></li><liclass="pic"><divid="zhushi_text3"class="zhushi">图片文字3</div><ahref="#"><imgsrc="images/tu4.gif"width="225"height="198"onmouseout="layer_show('zhushi_text3','hide')"onmouseover="layer_show('zhushi_text3','show')"/></a></li><liclass="pic"><divid="zhushi_text4"class="zhushi">图片文字4</div><ahref="#"><imgsrc="images/tu1.gif"width="225"height="198"onmouseout="layer_show('zhushi_text4','hide')"onmouseover="layer_show('zhushi_text4','show')"/></a></li><liclass="pic"><divid="zhushi_text5"class="zhushi">图片文字5</div><ahref="#"><imgsrc="images/tu2.gif"width="225"height="198"onmouseout="layer_show('zhushi_text5','hide')"onmouseover="layer_show('zhushi_text5','show')"/></a></li><liclass="pic"><divid="zhushi_text6"class="zhushi">图片文字6</div><ahref="#"><imgsrc="images/tu3.gif"width="225"height="198"onmouseout="layer_show('zhushi_text6','hide')"onmouseover="layer_show('zhushi_text6','show')"/></a></li><liclass="pic"><divid="zhushi_text7"class="zhushi">图片文字7</div><ahref="#"><imgsrc="images/tu4.gif"width="225"height="198"onmouseout="layer_show('zhushi_text7','hide')"onmouseover="layer_show('zhushi_text7','show')"/></a></li><liclass="pic"><divid="zhushi_text8"class="zhushi">图片文字8</div><ahref="#"><imgsrc="images/tu1.gif"width="225"height="198"onmouseout="layer_show('zhushi_text8','hide')"onmouseover="layer_show('zhushi_text8','show')"/></a></li><!--图片列表end--></ul><ulid="List2"></ul></div></div><divclass="RightBotton"onmousedown="ISL_GoDown()"onmouseup="ISL_StopDown()"onmouseout="ISL_StopDown()"><imgsrc="images/right.gif"width="25"height="31"/></div><scriptlanguage="javascript"type="text/javascript"><!--//--><![CDATA[//><!--//图片滚动列表varSpeed=0.1;//速度(毫秒)varSpace=10;//每次移动(px)varPageWidth=235;//翻页宽度varfill=0;//整体移位varMoveLock=false;varMoveTimeObj;varComp=0;varAutoPlayObj=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();functionGetObj(objName){if(document.getElementById){returneval('document.getElementById("'+objName+'")')}else{returneval('document.all.'+objName)}}functionAutoPlay(){//自动滚动clearInterval(AutoPlayObj);AutoPlayObj=setInterval('ISL_GoDown();ISL_StopDown();',5000);//间隔时间}functionISL_GoUp(){//上翻开始if(MoveLock)return;clearInterval(AutoPlayObj);MoveLock=true;MoveTimeObj=setInterval('ISL_ScrUp();',Speed);}functionISL_StopUp(){//上翻停止clearInterval(MoveTimeObj);if(GetObj('ISL_Cont').scrollLeft%PageWidth-fill!=0){Comp=fill-(GetObj('ISL_Cont').scrollLeft%PageWidth);CompScr();}else{MoveLock=false;}AutoPlay();}functionISL_ScrUp(){//上翻动作if(GetObj('ISL_Cont').scrollLeft<=0){GetObj('ISL_Cont').scrollLeft=GetObj('ISL_Cont').scrollLeft+GetObj('List1').offsetWidth}GetObj('ISL_Cont').scrollLeft-=Space;}functionISL_GoDown(){//下翻clearInterval(MoveTimeObj);if(MoveLock)return;clearInterval(AutoPlayObj);MoveLock=true;ISL_ScrDown();MoveTimeObj=setInterval('ISL_ScrDown()',Speed);}functionISL_StopDown(){//下翻停止clearInterval(MoveTimeObj);if(GetObj('ISL_Cont').scrollLeft%PageWidth-fill!=0){Comp=PageWidth-GetObj('ISL_Cont').scrollLeft%PageWidth+fill;CompScr();}else{MoveLock=false;}AutoPlay();}functionISL_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;}functionCompScr(){varnum;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></div></body></html>

解决方案

本帖最后由 jmlgc 于 2011-11-11 11:17:17 编辑
解决方案二:
就没有高手帮我看看?55555555555

时间: 2024-08-03 07:18:14

要求 图片循环滚动 左右控制,鼠标指针放到图片上显示该图片的名称,下面代码在ie8下正常显示,但在ie6 ie7下显示不正常的相关文章

PhotoShop制作图片循环滚动播放GIF动画教程

介绍PhotoShop制作屏幕上的图片循环滚动播放GIF动画效果,需要制作的图片要同样尺寸,不同尺寸的要调成同样大小,具体制作方法看教程, 喜欢的同学可以一起来学习一下! 最终效果图: 分类: PS入门教程

如何控制鼠标指针在移动时沿着某一条特定轨迹?

问题描述 比如当鼠标移动时,指针只能在一条直线或曲线上移动? 解决方案 解决方案二:鼠标移动事件中,你去控制鼠标位置就是了解决方案三:呃,可能我没说明白打个比方,一个panel上有一条直线,我想做的是鼠标光标的移动是由鼠标控制的,但不管鼠标如何运动,光标只能在直线上移动...解决方案四:引用1楼bdmh的回复: 鼠标移动事件中,你去控制鼠标位置就是了 呃,可能我没说明白打个比方,一个panel上有一条直线,我想做的是鼠标光标的移动是由鼠标控制的,但不管鼠标如何运动,光标只能在直线上移动...解决

javascript 可控制方向的图片循环滚动效果

js图片循环滚动效果2种例子

在网页中,会经常用到图片滚动的效果. 如下图: 那么是怎样实现的呢? 方法一:imgscroll.js.顾名思义,它是一款图片滚动插件.源码如下: $.fn.imgscroll = function(o){     var defaults = {         speed: 40,         amount: 0,         width: 1,         dir: "left"     };     o = $.extend(defaults, o);       

js图片循环滚动代码

 热图排行 1111111111111dadadadadadadadadadadadadadadadadadadada

左右图片循环滚动停顿一下后继续_图象特效

FLASH图片首尾连接循环滚动

要让几张图片循环滚动,最简的原理就是把连续图片再复制一份接到尾部,待第一张图片滚完之后被复制的接着滚动.原理图示如图7-5所示. 图 7-5 示意图 不管是用AS控制还是利用帧手工制作都可以使用这个原理,示意图中,共有两张图片为"图片一"和"图片二"并将他复制一组. 当第一组滚出显视区时,第二组正好接替进入了显视区回到我们第一帧的起始状态.如果用帧控制,只要直接跳回起始的第一帧就行了;如果是用AS程序控制,我们再把第一组的x轴位置重新设置接到第二组后面也一样可以构成

Flash几张图片首尾连接循环滚动

核心提示:Flash几张图片首尾连接循环滚动教程. 要让几张图片循环滚动,最简的原理就是把连续图片再复制一份接到尾部,待第一张图片滚完之后被复制的接着滚动.原理图示如图7-5所示. 图 7-5 示意图 不管是用AS控制还是利用帧手工制作都可以使用这个原理,示意图中,共有两张图片为"图片一"和"图片二"并将他复制一组. 当第一组滚出显视区时,第二组正好接替进入了显视区回到我们第一帧的起始状态.如果用帧控制,只要直接跳回起始的第一帧就行了:如果是用AS程序控制,我们再把

javascript实现图片左右滚动效果【可自动滚动,有左右按钮】_javascript技巧

本文实例讲述了javascript实现图片左右滚动效果.分享给大家供大家参考,具体如下: html代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <