关于纯JS实现定时器轮播,望大神解答下!!谢谢!!!

这个轮播一共五张图片,每张是宽620高250。。。我先说下我的思路,我在box这个大的div里设置的是一张图片的宽高,然后里面有个img的div,是拿来放图片的,设置宽为3100也就是5张图一共的宽度,box设置为over flow hidden。。。。基本上用这个布局来实现轮播。。。可是JS代码我有点晕哎,望大神指导下!!

function playnext(){    //播放下一张
    var slidercontent = document.getElementById();   //在("这里填写存放轮播图图片的ID")
    slidercontent.style.webkitTransition="all .3s linear";  //为轮播添加过渡效果
    if(slidercontent.style.marginLeft==""){
        slidercontent.style.marginLeft="0px";
    }
    var sliderwidth = 620;      //每张图片的大小
    if(parseInt(slidercontent.style.marginLeft)>-2480){ 
        slidercontent.style.marginLeft=parseInt(slidercontent.style.marginLeft)-sliderwidth+"px";
    }else{
        slidercontent.style.marginLeft="0px";
    }
}
function playprevious(){    //播放上一张
    var slidercontent = document.getElementById("lunbo2"); 
    if(slidercontent.style.marginLeft==""){
        slidercontent.style.marginLeft="0px";
    }
    var sliderwidth = 620;//每张图片的大小
    if(parseInt(slidercontent.style.marginLeft)<0){
        slidercontent.style.marginLeft=parseInt(slidercontent.style.marginLeft)+sliderwidth+"px";
    }else{
        slidercontent.style.marginLeft="-2480px";
    }
}

尤其不理解这段代码。。。if(parseInt(slidercontent.style.marginLeft)>-2480){
       slidercontent.style.marginLeft=parseInt(slidercontent.style.marginLeft)-sliderwidth+"px";
   }else{
       slidercontent.style.marginLeft="0px";
   }
}有木有大神能讲细点,菜鸟一枚啊,超级感谢!!!!!!!!1

nobcainiao
浏览 2744回答 2
2回答

Y_du

slidercontent.style.marginLeft=parseInt(slidercontent.style.marginLeft)-sliderwidth 这是没次移动的宽度。sliderwidth就是每张图片的宽度。margin-left是图片相对于其父的。

Y_du

这段代码的意思是,如果轮播到最后一张就把它的margin-left由-2480px变成0.这样又可以从第一张开始了。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript