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程序设计有所帮助。