美文网首页
JS实现轮播

JS实现轮播

作者: JellyFive | 来源:发表于2019-10-07 13:33 被阅读0次

    前端学习时间不长,最近看完了第一遍高设,想着试着写一点东西,于是有了这个还不算好的轮播效果。(学习出处为慕课网)


    实现过程

    首先,应该清楚将要实现的功能,我实现的功能主要为:

    • 鼠标滑过图片时左右两边的箭头出现,并且鼠标放在箭头上时箭头透明度降低
    • 点击左右箭头实现图片无限轮播
    • 图片下方圆点按钮会随着图片轮播而变化
    • 点击任意圆点按钮,图片能正确定位到相关位置
    • 鼠标移出图片时,图片按照一定时间间隔自动轮播,鼠标放入图片时,暂停自动播放

    接下来就是实现各个功能:
    1、鼠标滑过效果
    鼠标滑过效果可以直接通过伪类选择符hover实现

    .arrow{
        cursor: pointer;//鼠标放入箭头时显示为小手的形状
        display: none;//鼠标未滑入图片时,不显示效果
            line-height: 40px;text-align: center;font-size: 36px;font-weight: bold;width: 40px;height: 40px;
        position: absolute;//说明以父容器为定位基准
        z-index: 2;//此标签说明本部分与其他部分相比更靠近人
        top: 180px;background-color:#000;
        opacity: 0.3; //设置箭头出现的透明度
        color:#fff;
    }
    

    在鼠标滑过箭头时只需要改变箭头的透明度

    .arrow:hover{
        opacity: 0.7;
    }
    

    由于之前定义了display: none;,所以现在要将其显示出来

    #carousel:hover .arrow{
        display: block;
    }
    

    2、点击箭头实现轮播
    通过观察控制台可以发现,在进行图片轮播时,改变的其实是图片left:00px的值,也就是说只要能有一个函数,在鼠标点击箭头时准备定位此时图片的left值,就能实现图片的切换。

    function animate(offset){
         var left = parseInt(picture.style.left) + offset;
         picture.style.left = left + 'px';
    }
    next.onclick = function() {
        animate(-600px);//点击右箭头
    }
    prev.onclick = function() {
        animate(600px);//点击左箭头
    }
    

    但是上述方法不能实现无限滚动的效果,也就是说鼠标一直往一个方向点击时,会出现空白页,所以进行以下优化:
    在图片轮播到第一张后再次点击箭头,图片的left值将会变大,也就是说如果想要从第一张跳转到最后一张,可以加上最后一张的附属图,并将它的left值变为最后一张图的left值,从而实现跳转。

    function animate(offset){
         var left = parseInt(picture.style.left) + offset;
         if (left >-600) {
              picture.style.left = -3000 + 'px';
          }
         if (left <-3000) {
              picture.style.left = -600 + 'px';
          }
    }
    

    3、点击圆点按钮实现图片切换
    每一个按钮都设置了一个index值,用来显示图片序号。首先要实现圆点点亮功能。
    在css定义了一个圆点亮起的效果:

    #button .on{
        background: #fff;
    }
    

    定义一个方法来点亮圆点:

    function showbutton(){
        for (var i = 0; i<button.length; i++) {//遍历圆点
            if (button[i].className == 'on') {//如果遍历到的圆点亮着,则去掉,防止圆点一起亮起
                button[i].className='';
                break;
            }
        }
        button[index-1].className='on';//将当前按钮变为亮着
    }
    prev.onclick=function(){
        if (index == 1) {//如果没有此判断,index值将会一直减小,如果当前index为1,说明是第一个按钮,下一个按钮的index值为5
            index = 5;
        }
        else{
            index -= 1;
        }
        showbutton();
        animate(600);
    }
    

    现在要实现圆点按钮的任意切换,此时图片切换的原理与上述箭头切换一样,都是通过偏移量来进行切换,此时是通过index的值进行切换。

    for (var i = 0; i < button.length; i++) {
         button[i].onclick = function(){
            if (this.className == 'on') {
                return;//跳出函数,当点击当前页面的按钮时,不进行for循环
            }
            var newindex = parseInt(this.getAttribute('index'));//获取目标值
            var offset = -600 * (newindex - index);
            animate(offset);
            index = newindex;
            showbutton();//点击后需要显示按钮
            }
    

    4、设置图片切换速度,CSS3有一个过渡属性transition属性,但这个属性不能用在这里,试过之后可以发现图片切换的顺序实际上是123454321,而我们要的效果是1234512345,所以这里需要使用js。本效果使用setTimeout()方法来实现,每隔10ms,执行一次go()

    function animate(offset){
        if(offset == 0){
            return;
        }
        animated = true;
        var time =300;
        var interval = 10;//图片切换一下的时间
        var speed = offset/(time/interval);//设置图片的切换速度
        var left = parseInt(picture.style.left) + offset;
        var go = function(){
            if ((speed > 0 && parseInt(picture.style.left) < left) || (speed < 0 && parseInt(picture.style.left) > left)) {
                picture.style.left = parseInt(picture.style.left) + speed +'px';
                            setTimeout(go,interval);
            }
            else{
                picture.style.left = left +'px';
                if(left>-200){
                    picture.style.left = -600 * len + 'px';
                }
                if (left<(-600 *len)) {
                    picture.style.left = '-600px';
                }
                    animated = false;
            }
        }
        go();
    }
    

    5、实现自动切换
    自动切换使用了定时器,在一个时间间隔里,执行点击右箭头的方法。

    function play(){
                var timer = setTimeout(function(){
                        next.onclick();
                        play();
                    },interval);
                }
    

    在鼠标放在图片上时,自动切换暂停,因此需要清楚定时器。

    function stop(){
                    clearTimeout(timer);
                }
    

    最后通过以下方式,实现此功能:

    carousel.onmouseover = stop;
      carousel.onmouseout = play;
      play();
    

    学习心得

    虽然成功实现了轮播效果,但是在代码优化上还有很多需要改进的地方。目前还处于前端小白阶段,希望在接下来的学习中能有所提高。
    (本文可能存在很多漏洞,希望众大神能批评指出,感谢!)
    个人主页

    相关文章

      网友评论

          本文标题:JS实现轮播

          本文链接:https://www.haomeiwen.com/subject/iikmpctx.html