提示:您可以先修改部分代碼再運行
<!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>JS控製圖片向左向右滾動相容FF、IE</title><style>.rollBox01{width:600px;overflow:hidden;}.Ccont01{width:600px;overflow:hidden; float:left;}.Ccont01 .pic{width:200px;float:left; border:1px solid #cccccc; height:150px; margin-left:10px;}*+html .rollBox01 .Cont01 .pic{width:200px;float:left;}#List01,.rollBox01 #List02{float:left;}.Czpp_Ce {width:19px; float:left; padding:0px 10px; height:150px;}.Czpp_Ce img{ margin-top:20px;}</style></head><body><div> <div class="Czpp_Ce"></div> <div class="Ccont01" id="ISL_Cont_c"> <div ><div id="List01"> <div class="pic"></div><div class="pic"></div><div class="pic"></div><div class="pic"></div><div class="pic"></div><div class="pic"></div></div><div id="List02"> <div class="pic"></div><div class="pic"></div><div class="pic"></div><div class="pic"></div><div class="pic"></div><div class="pic"></div></div> </div> </div> <div class="Czpp_Ce"></div> <script type="text/javascript">// JavaScript Documentvar Speed_c = 10; //速度(毫秒)var Space_c = 10; //每次移動(px)var PageWidth_c = 200; //翻頁寬度var fill_c = 0; //整體移位var MoveLock_c = false;var MoveTimeObj_c;var Comp_c = 0;var AutoPlayObj_c = null;GetObj("List02").innerHTML = GetObj("List01").innerHTML;GetObj('ISL_Cont_c').scrollLeft = fill_c;GetObj("ISL_Cont_c").onmouseover = function(){clearInterval(AutoPlayObj_c);}GetObj("ISL_Cont_c").onmouseout = function(){AutoPlay_c();}AutoPlay_c();function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}}function AutoPlay_c(){ //自動滾動clearInterval(AutoPlayObj_c);AutoPlayObj_c = setInterval('ISL_GoDown_c();ISL_StopDown_c();',3000); //間隔時間}function ISL_GoUp_c(){ //上翻開始if(MoveLock_c) return;clearInterval(AutoPlayObj_c);MoveLock_c = true;MoveTimeObj_c = setInterval('ISL_ScrUp_c();',Speed_c);}function ISL_StopUp_c(){ //上翻停止clearInterval(MoveTimeObj_c);if(GetObj('ISL_Cont_c').scrollLeft % PageWidth_c - fill_c != 0){Comp_c = fill_c - (GetObj('ISL_Cont_c').scrollLeft % PageWidth_c);CompScr_c();}else{MoveLock_c = false;}AutoPlay_c();}function ISL_ScrUp_c(){ //上翻動作if(GetObj('ISL_Cont_c').scrollLeft <= 0){GetObj('ISL_Cont_c').scrollLeft = GetObj('ISL_Cont_c').scrollLeft + GetObj('List01').offsetWidth}GetObj('ISL_Cont_c').scrollLeft -= Space_c ;}function ISL_GoDown_c(){ //下翻clearInterval(MoveTimeObj_c);if(MoveLock_c) return;clearInterval(AutoPlayObj_c);MoveLock_c = true;ISL_ScrDown_c();MoveTimeObj_c = setInterval('ISL_ScrDown_c()',Speed_c);}function ISL_StopDown_c(){ //下翻停止clearInterval(MoveTimeObj_c);if(GetObj('ISL_Cont_c').scrollLeft % PageWidth_c - fill_c != 0 ){Comp_c = PageWidth_c - GetObj('ISL_Cont_c').scrollLeft % PageWidth_c + fill_c;CompScr_c();}else{MoveLock_c = false;}AutoPlay_c();}function ISL_ScrDown_c(){ //下翻動作if(GetObj('ISL_Cont_c').scrollLeft >= GetObj('List01').scrollWidth){GetObj('ISL_Cont_c').scrollLeft =GetObj('ISL_Cont_c').scrollLeft - GetObj('List01').scrollWidth;}GetObj('ISL_Cont_c').scrollLeft += Space_c ;}function CompScr_c(){var num_c;if(Comp_c == 0){MoveLock_c = false;return;}if(Comp_c < 0){ //上翻if(Comp_c < -Space_c){ Comp_c += Space_c; num_c = Space_c;}else{ num_c = -Comp_c; Comp_c = 0;}GetObj('ISL_Cont_c').scrollLeft -= num_c;setTimeout('CompScr_c()',Speed_c);}else{ //下翻if(Comp_c > Space_c){ Comp_c -= Space_c; num_c = Space_c;}else{ num_c = Comp_c; Comp_c = 0;}GetObj('ISL_Cont_c').scrollLeft += num_c;setTimeout('CompScr_c()',Speed_c);}}</script></div></body></html></td> </tr></table>
提示:您可以先修改部分代碼再運行