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为判断文字所用,没有添加自动轮播效果,如果需要只需要添加定时器模拟点击即可

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值