javascript实现图片左右滚动效果【可自动滚动，有左右按钮】
本文实例讲述了javascript实现图片左右滚动效果。分享给大家供大家参考，具体如下：
html代码：
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8"/>
<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/>
<metaname="renderer"content="webkit"/>
<metaname="keywords"content=""/>
<metaname="description"content=""/>
<title>图片滚动</title>
<style>
*{margin:0;padding:0;}
ul{list-style:none;}
img{border:0;}
.scroll{width:358px;height:63px;}
.scroll_left{width:23px;height:63px;background:url(images/btn_left.jpg)no-repeat;float:left;}
.scroll_right{width:23px;height:63px;background:url(images/btn_right.jpg)leftno-repeat;float:left;}
.pic{width:312px;height:73px;float:left;}
.picul{display:block;}
.picli{float:left;display:inline;width:104px;text-align:center;}
</style>
</head>
<body>
<divstyle="margin:100pxauto;width:358px;">
<divclass="scroll">
<divclass="scroll_left"id="LeftArr"></div>
<divclass="pic"id="scrollPic">
<ul>
<li><ahref="#"target="_blank"title=""><imgsrc="images/pic01.png"width="100"height="63"alt=""/></a></li>
<li><ahref="#"target="_blank"title=""><imgsrc="images/pic02.jpg"width="100"height="63"alt=""/></a></li>
<li><ahref="#"target="_blank"title=""><imgsrc="images/pic03.jpg"width="100"height="63"alt=""/></a></li>
<li><ahref="#"target="_blank"title=""><imgsrc="images/pic04.jpg"width="100"height="63"alt=""/></a></li>
<li><ahref="#"target="_blank"title=""><imgsrc="images/pic05.jpg"width="100"height="63"alt=""/></a></li>
<li><ahref="#"target="_blank"title=""><imgsrc="images/pic06.jpg"width="100"height="63"alt=""/></a></li>
</ul>
</div>
<divclass="scroll_right"id="RightArr"></div>
</div>
</div>
</body>
</html>
<scriptsrc="scrollPic.js"></script>
<script>
window.onload=function(){
scrollPic();
}
functionscrollPic(){
varscrollPic=newScrollPic();
scrollPic.scrollContId="scrollPic";//内容容器ID
scrollPic.arrLeftId="LeftArr";//左箭头ID
scrollPic.arrRightId="RightArr";//右箭头ID
scrollPic.frameWidth=312;//显示框宽度
scrollPic.pageWidth=104;//翻页宽度
scrollPic.speed=10;//移动速度(单位毫秒，越小越快)
scrollPic.space=10;//每次移动像素(单位px，越大越快)
scrollPic.autoPlay=true;//自动播放
scrollPic.autoPlayTime=3;//自动播放间隔时间(秒)
scrollPic.initialize();//初始化
}
</script>
scrollPic.js代码：
varsina={
$:function(objName){
if(document.getElementById){
returneval('document.getElementById("'+objName+'")')
}else{
returneval('document.all.'+objName)
}
},
isIE:navigator.appVersion.indexOf("MSIE")!=-1?true:false,
addEvent:function(l,i,I){
if(l.attachEvent){
l.attachEvent("on"+i,I)
}else{
l.addEventListener(i,I,false)
}
},
delEvent:function(l,i,I){
if(l.detachEvent){
l.detachEvent("on"+i,I)
}else{
l.removeEventListener(i,I,false)
}
},
readCookie:function(O){
varo="",
l=O+"=";
if(document.cookie.length>0){
vari=document.cookie.indexOf(l);
if(i!=-1){
i+=l.length;
varI=document.cookie.indexOf(";",i);
if(I==-1)
I=document.cookie.length;
o=unescape(document.cookie.substring(i,I))
}
};
returno
},
writeCookie:function(i,l,o,c){
varO="",
I="";
if(o!=null){
O=newDate((newDate).getTime()+o*3600000);
O=";expires="+O.toGMTString()
};
if(c!=null){
I=";domain="+c
};
document.cookie=i+"="+escape(l)+O+I
},
readStyle:function(I,l){
if(I.style[l]){
returnI.style[l]
}elseif(I.currentStyle){
returnI.currentStyle[l]
}elseif(document.defaultView&&document.defaultView.getComputedStyle){
vari=document.defaultView.getComputedStyle(I,null);
returni.getPropertyValue(l)
}else{
returnnull
}
}
};
//滚动图片构造函数
//UI&UEDept.mengjia
//080623
functionScrollPic(scrollContId,arrLeftId,arrRightId,dotListId){
this.scrollContId=scrollContId;
this.arrLeftId=arrLeftId;
this.arrRightId=arrRightId;
this.dotListId=dotListId;
this.dotClassName="dotItem";
this.dotOnClassName="dotItemOn";
this.dotObjArr=[];
this.pageWidth=0;
this.frameWidth=0;
this.speed=10;
this.space=10;
this.pageIndex=0;
this.autoPlay=true;
this.autoPlayTime=5;
var_autoTimeObj,
_scrollTimeObj,
_state="ready";
this.stripDiv=document.createElement("DIV");
this.listDiv01=document.createElement("DIV");
this.listDiv02=document.createElement("DIV");
if(!ScrollPic.childs){
ScrollPic.childs=[]
};
this.ID=ScrollPic.childs.length;
ScrollPic.childs.push(this);
this.initialize=function(){
if(!this.scrollContId){
thrownewError("必须指定scrollContId.");
return
};
this.scrollContDiv=sina.$(this.scrollContId);
if(!this.scrollContDiv){
thrownewError("scrollContId不是正确的对象.(scrollContId=\""+this.scrollContId+"\")");
return
};
this.scrollContDiv.style.width=this.frameWidth+"px";
this.scrollContDiv.style.overflow="hidden";
this.listDiv01.innerHTML=this.listDiv02.innerHTML=this.scrollContDiv.innerHTML;
this.scrollContDiv.innerHTML="";
this.scrollContDiv.appendChild(this.stripDiv);
this.stripDiv.appendChild(this.listDiv01);
this.stripDiv.appendChild(this.listDiv02);
this.stripDiv.style.overflow="hidden";
this.stripDiv.style.zoom="1";
this.stripDiv.style.width="32766px";
if(-[1,]){
this.listDiv01.style.cssFloat="left";
this.listDiv02.style.cssFloat="left";
}else{
this.listDiv01.style.styleFloat="left";
this.listDiv02.style.styleFloat="left";
}
sina.addEvent(this.scrollContDiv,"mouseover",Function("ScrollPic.childs["+this.ID+"].stop()"));
sina.addEvent(this.scrollContDiv,"mouseout",Function("ScrollPic.childs["+this.ID+"].play()"));
if(this.arrLeftId){
this.arrLeftObj=sina.$(this.arrLeftId);
if(this.arrLeftObj){
sina.addEvent(this.arrLeftObj,"mousedown",Function("ScrollPic.childs["+this.ID+"].rightMouseDown()"));
sina.addEvent(this.arrLeftObj,"mouseup",Function("ScrollPic.childs["+this.ID+"].rightEnd()"));
sina.addEvent(this.arrLeftObj,"mouseout",Function("ScrollPic.childs["+this.ID+"].rightEnd()"))
}
};
if(this.arrRightId){
this.arrRightObj=sina.$(this.arrRightId);
if(this.arrRightObj){
sina.addEvent(this.arrRightObj,"mousedown",Function("ScrollPic.childs["+this.ID+"].leftMouseDown()"));
sina.addEvent(this.arrRightObj,"mouseup",Function("ScrollPic.childs["+this.ID+"].leftEnd()"));
sina.addEvent(this.arrRightObj,"mouseout",Function("ScrollPic.childs["+this.ID+"].leftEnd()"))
}
};
if(this.dotListId){
this.dotListObj=sina.$(this.dotListId);
if(this.dotListObj){
varpages=Math.round(this.listDiv01.offsetWidth/this.frameWidth+0.4),
i,
tempObj;
for(i=0;i<pages;i++){
tempObj=document.createElement("span");
this.dotListObj.appendChild(tempObj);
this.dotObjArr.push(tempObj);
if(i==this.pageIndex){
tempObj.className=this.dotClassName
}else{
tempObj.className=this.dotOnClassName
};
tempObj.title="第"+(i+1)+"页";
sina.addEvent(tempObj,"click",Function("ScrollPic.childs["+this.ID+"].pageTo("+i+")"))
}
}
};
if(this.autoPlay){
this.play()
}
};
this.leftMouseDown=function(){
if(_state!="ready"){
return
};
_state="floating";
_scrollTimeObj=setInterval("ScrollPic.childs["+this.ID+"].moveLeft()",this.speed)
};
this.rightMouseDown=function(){
if(_state!="ready"){
return
};
_state="floating";
_scrollTimeObj=setInterval("ScrollPic.childs["+this.ID+"].moveRight()",this.speed)
};
this.moveLeft=function(){
if(this.scrollContDiv.scrollLeft+this.space>=this.listDiv01.scrollWidth){
this.scrollContDiv.scrollLeft=this.scrollContDiv.scrollLeft+this.space-this.listDiv01.scrollWidth
}else{
this.scrollContDiv.scrollLeft+=this.space
};
this.accountPageIndex()
};
this.moveRight=function(){
if(this.scrollContDiv.scrollLeft-this.space<=0){
this.scrollContDiv.scrollLeft=this.listDiv01.scrollWidth+this.scrollContDiv.scrollLeft-this.space
}else{
this.scrollContDiv.scrollLeft-=this.space
};
this.accountPageIndex()
};
this.leftEnd=function(){
if(_state!="floating"){
return
};
_state="stoping";
clearInterval(_scrollTimeObj);
varfill=this.pageWidth-this.scrollContDiv.scrollLeft%this.pageWidth;
this.move(fill)
};
this.rightEnd=function(){
if(_state!="floating"){
return
};
_state="stoping";
clearInterval(_scrollTimeObj);
varfill=-this.scrollContDiv.scrollLeft%this.pageWidth;
this.move(fill)
};
this.move=function(num,quick){
varthisMove=num/5;
if(!quick){
if(thisMove>this.space){
thisMove=this.space
};
if(thisMove<-this.space){
thisMove=-this.space
}
};
if(Math.abs(thisMove)<1&&thisMove!=0){
thisMove=thisMove>=0?1:-1
}else{
thisMove=Math.round(thisMove)
};
vartemp=this.scrollContDiv.scrollLeft+thisMove;
if(thisMove>0){
if(this.scrollContDiv.scrollLeft+thisMove>=this.listDiv01.scrollWidth){
this.scrollContDiv.scrollLeft=this.scrollContDiv.scrollLeft+thisMove-this.listDiv01.scrollWidth
}else{
this.scrollContDiv.scrollLeft+=thisMove
}
}else{
if(this.scrollContDiv.scrollLeft-thisMove<=0){
this.scrollContDiv.scrollLeft=this.listDiv01.scrollWidth+this.scrollContDiv.scrollLeft-thisMove
}else{
this.scrollContDiv.scrollLeft+=thisMove
}
};
num-=thisMove;
if(Math.abs(num)==0){
_state="ready";
if(this.autoPlay){
this.play()
};
this.accountPageIndex();
return
}else{
this.accountPageIndex();
setTimeout("ScrollPic.childs["+this.ID+"].move("+num+","+quick+")",this.speed)
}
};
this.next=function(){
if(_state!="ready"){
return
};
_state="stoping";
this.move(this.pageWidth,true)
};
this.play=function(){
if(!this.autoPlay){
return
};
clearInterval(_autoTimeObj);
_autoTimeObj=setInterval("ScrollPic.childs["+this.ID+"].next()",this.autoPlayTime*1000)
};
this.stop=function(){
clearInterval(_autoTimeObj)
};
this.pageTo=function(num){
if(_state!="ready"){
return
};
_state="stoping";
varfill=num*this.frameWidth-this.scrollContDiv.scrollLeft;
this.move(fill,true)
};
this.accountPageIndex=function(){
this.pageIndex=Math.round(this.scrollContDiv.scrollLeft/this.frameWidth);
if(this.pageIndex>Math.round(this.listDiv01.offsetWidth/this.frameWidth+0.4)-1){
this.pageIndex=0
};
vari;
for(i=0;i<this.dotObjArr.length;i++){
if(i==this.pageIndex){
this.dotObjArr[i].className=this.dotClassName
}else{
this.dotObjArr[i].className=this.dotOnClassName
}
}
}
};
参数说明：
varscrollPic=newScrollPic(); //定义变量，并初始化方法
scrollContId //滚动容器的ID
arrLeftId //左按钮ID
arrRightId //右按钮ID
frameWidth //显示框宽度
pageWidth //翻页宽度
speed //移动速度(单位毫秒，越小越快)
space //每次移动像素(单位px，越大越快)
autoPlay //自动播放
autoPlayTime //自动播放间隔时间(秒)
initialize() //初始化
完整实例代码点击此处本站下载。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。