js图片库（无缝循环切换，左右移动效果）

今天尝试了写一个js的左右滑动效果的图片库（以前都是用渐变效果）；话费2小时完成，具体代码如下

window.onload=function () {

var go={

n:-40, //用来存储当前位置

myclick:function(){

getClass (“goclick”)[0].onclick=function(){

go.n=-40 //初始化当前位置

go.goleft() //跳转到主左滑动程序

};

getClass (“goclick”)[1].onclick=function(){

mynode.nodetwo()

go.n=-340

go.goright()

};

},

goleft:function(){

go.myleft()

},

myleft:function(){

if (go.n>-340) {

go.n-=2

getId (“box”).style.left=go.n+”px”

setTimeout(function(){go.myleft()},1) //延迟一毫秒跳转回主滑动程序（达到延迟目的）

}else{ //如果到了位置

getId (“box”).style.left=”-40px” //让ul回到初始位置

mynode.nodes() //执行附加程序

go.n=-40 //初始化当前位置

};

},

goright:function(){

go.myright()

},

myright:function(){

if (go.n<-40) {

go.n+=2

getId (“box”).style.left=go.n+”px”

setTimeout(function(){go.myright()},1)

}else{

go.n=-340

};

}

};

var mynode={

n:0,

nodes:function(){

getId(“box”).appendChild(getId (“myimg”)); //获取第一个图插到最后一张

getId(“mainText”).innerHTML=getId(“myimg”).title

},

nodetwo:function(){

getId(“box”).insertBefore(getClass (“myimg”)[3],getId(“myimg”)) //最后一张切到第一张备用

getId (“box”).style.left=”-340px” //当前位置跳转到-340（成为第二张）

getId(“mainText”).innerHTML=getId(“myimg”).title

}

};

for (var i = 0; i <2; i++) {

getClass (“goclick”)[i].onmouseover=function(){ //箭头

this.style.opacity=1

};

getClass (“goclick”)[i].onmouseout=function(){

this.style.opacity=0.3

};

}

go.myclick()

function getId (myid) {

return document.getElementById(myid)

};

function getClass (myclass) {

return document.getElementsByClassName(myclass)

};

function getName (myname) {

return document.getElementsByTagName(myname)

};

};

具体思路为 首先缺点点击的是左滑动还是右滑动，如果左滑动则让位置变量回到初始值，随后调用循环移动函数，判断位置变量是否为目标值，不是则递归移动，是则把变量归零退出。 右滑动相反则可，title为判断文字所用，没有添加自动轮播效果，如果需要只需要添加定时器模拟点击即可