Javascript控制图片向左向右滚动代码(兼容FF、IE)

作者：简简单单 2013-10-23

提示：您可以先修改部分代码再运行

<!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{overflow:hidden;}
.Ccont01{overflow:hidden; float:left;}
.Ccont01 .pic{float:left; border:1px solid #cccccc;  margin-left:10px;}
*+html .rollBox01 .Cont01 .pic{float:left;}
#List01,.rollBox01 #List02{float:left;}
.Czpp_Ce {
	 float:left; padding:0px 10px; 
}
.Czpp_Ce img{
         margin-top:20px;}
</style>
</head><body>
<div>
            <div class="Czpp_Ce"><img  onmousedown="ISL_GoUp_c()" onmouseup="ISL_StopUp_c()" onmouseout="ISL_StopUp_c()" style="cursor: pointer;" src="https://img.111com.net/get_pic/2013/10/23/20131023060347104.gif"></div>
              
                <div class="Ccont01" id="ISL_Cont_c">
                  <div style="">
<div id="List01"> 
<div class="pic"><a href="https://img.111com.net/get_pic/2013/10/23/2013102306034948.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/2013102306034948.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/2013102306034948.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/2013102306034948.jpg" class="js-smartPhoto" target="_blank"><img  src="https://img.111com.net/get_pic/2013/10/23/2013102306034948.jpg" /></a></a></a></a></div>
<div class="pic"><a href="https://img.111com.net/get_pic/2013/10/23/20131023060351838.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/20131023060351838.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/20131023060351838.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/20131023060351838.jpg" class="js-smartPhoto" target="_blank"><img  src="https://img.111com.net/get_pic/2013/10/23/20131023060351838.jpg" /></a></a></a></a></div>
<div class="pic"><a href="https://img.111com.net/get_pic/2013/10/23/20131023060353573.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/20131023060353573.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/20131023060353573.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/20131023060353573.jpg" class="js-smartPhoto" target="_blank"><img  src="https://img.111com.net/get_pic/2013/10/23/20131023060353573.jpg" /></a></a></a></a></div>
<div class="pic"><a href="https://img.111com.net/get_pic/2013/10/23/2013102306034948.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/2013102306034948.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/2013102306034948.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/2013102306034948.jpg" class="js-smartPhoto" target="_blank"><img  src="https://img.111com.net/get_pic/2013/10/23/2013102306034948.jpg" /></a></a></a></a></div>
<div class="pic"><a href="https://img.111com.net/get_pic/2013/10/23/20131023060351838.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/20131023060351838.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/20131023060351838.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/20131023060351838.jpg" class="js-smartPhoto" target="_blank"><img  src="https://img.111com.net/get_pic/2013/10/23/20131023060351838.jpg" /></a></a></a></a></div>
<div class="pic"><a href="https://img.111com.net/get_pic/2013/10/23/20131023060353573.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/20131023060353573.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/20131023060353573.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/20131023060353573.jpg" class="js-smartPhoto" target="_blank"><img  src="https://img.111com.net/get_pic/2013/10/23/20131023060353573.jpg" /></a></a></a></a></div>
</div>
<div id="List02"> 
<div class="pic"><a href="https://img.111com.net/get_pic/2013/10/23/2013102306034948.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/2013102306034948.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/2013102306034948.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/2013102306034948.jpg" class="js-smartPhoto" target="_blank"><img  src="https://img.111com.net/get_pic/2013/10/23/2013102306034948.jpg" /></a></a></a></a></div>
<div class="pic"><a href="https://img.111com.net/get_pic/2013/10/23/20131023060351838.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/20131023060351838.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/20131023060351838.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/20131023060351838.jpg" class="js-smartPhoto" target="_blank"><img  src="https://img.111com.net/get_pic/2013/10/23/20131023060351838.jpg" /></a></a></a></a></div>
<div class="pic"><a href="https://img.111com.net/get_pic/2013/10/23/20131023060353573.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/20131023060353573.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/20131023060353573.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/20131023060353573.jpg" class="js-smartPhoto" target="_blank"><img  src="https://img.111com.net/get_pic/2013/10/23/20131023060353573.jpg" /></a></a></a></a></div>
<div class="pic"><a href="https://img.111com.net/get_pic/2013/10/23/2013102306034948.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/2013102306034948.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/2013102306034948.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/2013102306034948.jpg" class="js-smartPhoto" target="_blank"><img  src="https://img.111com.net/get_pic/2013/10/23/2013102306034948.jpg" /></a></a></a></a></div>
<div class="pic"><a href="https://img.111com.net/get_pic/2013/10/23/20131023060351838.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/20131023060351838.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/20131023060351838.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/20131023060351838.jpg" class="js-smartPhoto" target="_blank"><img  src="https://img.111com.net/get_pic/2013/10/23/20131023060351838.jpg" /></a></a></a></a></div>
<div class="pic"><a href="https://img.111com.net/get_pic/2013/10/23/20131023060353573.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/20131023060353573.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/20131023060353573.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2013/10/23/20131023060353573.jpg" class="js-smartPhoto" target="_blank"><img  src="https://img.111com.net/get_pic/2013/10/23/20131023060353573.jpg" /></a></a></a></a></div>
</div>
                  </div>
                </div>
           
            <div class="Czpp_Ce"><img  onmousedown="ISL_GoDown_c()" onmouseup="ISL_StopDown_c()" onmouseout="ISL_StopDown_c()" style="cursor: pointer;" src="https://img.111com.net/get_pic/2013/10/23/20131023060356487.gif"></div>

<script type="text/javascript">
// JavaScript Document

var 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>

提示：您可以先修改部分代码再运行

上一个：JavaScript网站左侧或右侧树形菜单效果下一个：Js大图带小图焦点图效果代码

相关文章

精彩推荐