js图片库(无缝循环切换,左右移动效果)

今天尝试了写一个js的左右滑动效果的图片库(以前都是用渐变效果);话费2小时完成,具体代码如下
window.οnlοad=function () {
var go={
n:-40, //用来存储当前位置
myclick:function(){
getClass (“goclick”)[0].οnclick=function(){
go.n=-40 //初始化当前位置
go.goleft() //跳转到主左滑动程序
};
getClass (“goclick”)[1].οnclick=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].οnmοuseοver=function(){ //箭头
this.style.opacity=1
};
getClass (“goclick”)[i].οnmοuseοut=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为判断文字所用,没有添加自动轮播效果,如果需要只需要添加定时器模拟点击即可

你可能感兴趣的:(javascript,图片库)