JS实现的相册图片左右滚动完整实例
本文实例讲述了JS实现的相册图片左右滚动效果。分享给大家供大家参考，具体如下：
执行左移右移函数：
var$get=function(id){
return"string"==typeofid?document.getElementById(id):id;
};
varExtend=function(destination,source){
for(varpropertyinsource){
destination[property]=source[property];
}
returndestination;
}
varCurrentStyle=function(element){
returnelement.currentStyle||document.defaultView.getComputedStyle(element,null);
}
varBind=function(object,fun){
varargs=Array.prototype.slice.call(arguments).slice(2);
returnfunction(){
returnfun.apply(object,args.concat(Array.prototype.slice.call(arguments)));
}
}
varTween={
Quart:{
easeOut:function(t,b,c,d){
return-c*((t=t/d-1)*t*t*t-1)+b;
}
},
Back:{
easeOut:function(t,b,c,d,s){
if(s==undefined)s=1.70158;
returnc*((t=t/d-1)*t*((s+1)*t+s)+1)+b;
}
},
Bounce:{
easeOut:function(t,b,c,d){
if((t/=d)<(1/2.75)){
returnc*(7.5625*t*t)+b;
}elseif(t<(2/2.75)){
returnc*(7.5625*(t-=(1.5/2.75))*t+.75)+b;
}elseif(t<(2.5/2.75)){
returnc*(7.5625*(t-=(2.25/2.75))*t+.9375)+b;
}else{
returnc*(7.5625*(t-=(2.625/2.75))*t+.984375)+b;
}
}
}
}
//容器对象,滑动对象,切换数量
varSlideTrans=function(container,slider,count,options){
this._slider=$get(slider);
this._container=$get(container);//容器对象
this._timer=null;//定时器
this._count=Math.abs(count);//切换数量
this._target=0;//目标值
this._t=this._b=this._c=0;//tween参数
this.Index=0;//当前索引
this.SetOptions(options);
this.Auto=!!this.options.Auto;
this.Duration=Math.abs(this.options.Duration);
this.Time=Math.abs(this.options.Time);
this.Pause=Math.abs(this.options.Pause);
this.Tween=this.options.Tween;
this.onStart=this.options.onStart;
this.onFinish=this.options.onFinish;
varbVertical=!!this.options.Vertical;
this._css=bVertical?"top":"left";//方向
//样式设置
varp=CurrentStyle(this._container).position;
p=="relative"||p=="absolute"||(this._container.style.position="relative");
this._container.style.overflow="hidden";
this._slider.style.position="absolute";
this.Change=this.options.Change?this.options.Change:
this._slider[bVertical?"offsetHeight":"offsetWidth"]/this._count;
};
SlideTrans.prototype={
//设置默认属性
SetOptions:function(options){
this.options={//默认值
Vertical:true,//是否垂直方向（方向不能改）
Auto:false,//是否自动
Change:0,//改变量
Duration:50,//滑动持续时间
Time:10,//滑动延时
Pause:2000,//停顿时间(Auto为true时有效)
onStart:function(){},//开始转换时执行
onFinish:function(){},//完成转换时执行
Tween:Tween.Quart.easeOut//tween算子
};
Extend(this.options,options||{});
},
//开始切换
Run:function(index){
//修正index
index==undefined&&(index=this.Index);
index<0&&(index=this._count-1)||index>=this._count&&(index=0);
//设置参数
this._target=-Math.abs(this.Change)*(this.Index=index);
this._t=0;
this._b=parseInt(CurrentStyle(this._slider)[this.options.Vertical?"top":"left"]);
this._c=this._target-this._b;
this.onStart();
this.Move();
},
//移动
Move:function(){
clearTimeout(this._timer);
//未到达目标继续移动否则进行下一次滑动
if(this._c&&this._t<this.Duration){
this.MoveTo(Math.round(this.Tween(this._t++,this._b,this._c,this.Duration)));
this._timer=setTimeout(Bind(this,this.Move),this.Time);
}else{
this.MoveTo(this._target);
this.Auto&&(this._timer=setTimeout(Bind(this,this.Next),this.Pause));
}
},
//移动到
MoveTo:function(i){
this._slider.style[this._css]=i+"px";
},
//下一个
Next:function(){
this.Run(++this.Index);
},
//上一个
Previous:function(){
this.Run(--this.Index);
},
//停止
Stop:function(){
clearTimeout(this._timer);this.MoveTo(this._target);
}
};
在前天html加入div容器：
<!--Iconscrollbegin--> <divstyle="text-align:center;width:100%;margin:autoauto"> <divclass="container"id="idContainer"runat="server"> </div> </div> <!--end--> <!--左右滚动按钮--> <divclass="defaultprenext"> <tablecellpadding=0cellspacing=0style="width:100%"> <tr> <tdstyle="width:40%;text-align:left;padding-left:6px"> <imgid="ImgPre"alt=""src="ImageV3/Default/pre-gray.png"/> <spanclass="pager"id="Pre"style="color:Gray">Pre</span></td> <tdstyle="width:20%;text-align:center"> <divclass="defaultprenextmid"> <divstyle="height:10px;vertical-align:middle;line-height:10px"> <imgsrc="ImageV3/Default/greendot.png"id="Img1"/> <imgsrc="ImageV3/Default/graydot.png"id="Img2"/> <imgsrc="ImageV3/Default/graydot.png"id="Img3"/> </div> </div> </td> <tdstyle="width:40%;text-align:right;padding-right:6px"> <spanclass="pager"id="Next"style="color:#2f6417">Next</span> <imgid="ImgNext"alt=""src="ImageV3/Default/next-green.png"/> </td> </tr> </table> </div>
下面是改变左右按钮可用状态
varimgNum=$get("idContainer").getElementsByTagName("img").length;
varpre=$get("Pre");
varnext=$get("Next");
vari=0;
if(imgNum>0){
varst=newSlideTrans("idContainer","idSlider",3,{Vertical:false});
if(i<2){
$get("Next").onclick=function(){
if(i<2){
st.Next();
i++;
if(i==1){
$get("ImgPre").src="ImageV3/Default/pre-green.png";
pre.style.color="#2f6417";
}
if(i==2){
$get("ImgNext").src="ImageV3/Default/next-gray.png";
next.style.color="Gray";
}
ChangePicIndex(i);
}
}
}
$get("Pre").onclick=function(){
if(i>0){
st.Previous();
$get("ImgNext").src="ImageV3/Default/next-green.png";
next.style.color="#2f6417";
i--;
if(i==0){
$get("ImgPre").src="ImageV3/Default/pre-gray.png";
pre.style.color="Gray";
}
ChangePicIndex(i);
}
}
st.Run();
}
functionChangePicIndex(index){
switch(index){
case1:
$get("Img1").src="ImageV3/Default/graydot.png";
$get("Img2").src="ImageV3/Default/greendot.png";
$get("Img3").src="ImageV3/Default/graydot.png";
break
case2:
$get("Img1").src="ImageV3/Default/graydot.png";
$get("Img2").src="ImageV3/Default/graydot.png";
$get("Img3").src="ImageV3/Default/greendot.png";
break
default:
$get("Img1").src="ImageV3/Default/greendot.png";
$get("Img2").src="ImageV3/Default/graydot.png";
$get("Img3").src="ImageV3/Default/graydot.png";
}
}
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。