图片滑动展示.docVIP

图片滑动展示 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title图片滑动展示/title script type=text/javascript !-- var a=0,pos=0,sumpics=6,t1,abc=0,width=400; /*a作为计数器，保证移动40次之后停止移动，并保证在图片移动过程中点击左移右移无效 pos表示bigpic1图片的left值 sumpics表示图片总数，插入或删减图片之后记得更改否则新增的图片无法显示 t1用作计时器,定时调用slidepic(way)函数 abc用于在图片移动到两边时能够返回到另一边的图片 width变量应与pics类中的width值相同*/ function slidepic(way){ //一般情况下的图片移动，way代表移动的方向，way=0左移，否则右移 if (pos=0pos=width-sumpics*width){ a++;//代表图片移动了一次 if (a=40){ if(way=0)pos-=10;//左移10像素 else pos+=10;//右移10像素 for(var i=1;i=sumpics;i++){//此处循环是为了在图片较多时能减少代码 //所有图片都移动，下面一行是移动的具体方式 document.getElementById(pic+i).style.left=pos+width*(i-1)+px; } } else {clearInterval(t1);a=0;}//停止移动，及后续操作：计时器清零，令a=0是为下一次移动做准备，并使左右移动的按钮生效 } //下面这行的条件是为了判断是否最左边的特殊情况 else if(poswidth-sumpics*width){ //当左移到最后一张图片时，右边已经没有图片，是特殊情况，所以必须特殊处理，即把最后一张图片左移，其余图片整体按顺序移动到右边之后再进行左移，保证每按一次都能换一张图片 a++; //这个地方的条件是a=41，与上面普通情况不同是因为普通情况时前一次移动会为后一次移动提供一次pos-=10，而特殊情况下用的是abc，前面没有提供abc-=10所以应该多算一次 if (a=41){ abc-=10;//左移10像素 //下面是具体移动的方式 document.getElementById(pic+sumpics).style.left=abc+px;//最后一张图片左移 for(var i=1;isumpics;i++){//此处循环是为了在图片较多时能减少代码 document.getElementById(pic+i).style.left=abc+width*i+px;//其余所有图片均移动到最后一张图片的右边并同时开始左移 } } else {clearInterval(t1);a=0;abc=0;pos=0;}//后续操作：t1和a的操作与上相同，abc=0是为了保证下一次特殊情况能移动图片，pos=0是为了保证下一次普通情况能移动图片 } //下面这行的条件是为了判断是否最右边的特殊情况 else if(pos0){ a++;//代表图片移动了一次 //这一行的条件是a=41，理由与上相同 if(a=41){ abc+=10;//右移10像素 document.getElementById(pic+1).style.left=abc+px;//第一张图片右移 for(var i=2;i=sumpics;i++){//此处循环是为了在图片较多时能减少代码 document.getElementById(pic+i).style.left=abc-width*(sumpics-i+1)+px;//除第一张图片均按顺序移动到左边并同时开始右移 } } else {clearInterval(t1);a=0;abc=0;pos=width-width*sumpics;}//后续操作：t1和a的操作与上相同，abc=0是为了保证下一次特殊情况能移动图片，pos=400-400*sumpics是为了保证下一次普通情况能移动图片 } } /