搜索
您的当前位置:首页正文

用Jquery制作一个无缝滚动轮播

2024-12-20 来源:哗拓教育

这篇文章的目的是帮助自己复习,还有写东西的时候的思路。


Paste_Image.png

首先我们看一下制作一个轮播的思路:

  • 先把轮播的HTML和CSS给写好,这一步就不多讲,本文章主要讲的是JS的实现。
  • 既然是无缝的轮播,那么首先图片就要排成一排
  • 有一个视口,超出视口的图片要隐藏(在CSS实现,overflow:hidden
  • 滚动的时候视口进行偏移,偏移到下个图片
  • 到最后一张(或第一张往前)的时候,要连续的滚动,而不是瞬间回滚到第一张
    有了思路就可以开始实现JS了
    先附上HTML结构:
    <body>
    <div class="ct">
        <ul class="img-ct">
            <li><a 
            <li><a 
            <li><a 
            <li><a 
        </ul>
        <a class = 'pre  arrow' href="#"><</a>
        <a class = 'next arrow' href="#">></a>
        <ul class="nav">
            <li class = 'setcolor'></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

首先我们写效果的第一步是什么?就是拿到相应的DOM节点

 var    $ct = $('.img-ct'),      //获取视口节点
        $items = $ct.children(), //获取视口下需要轮播的图片元素
        $pre = $('.pre'),       //获取上一张功能按钮
        $next = $('.next'),     //获取下一张功能按钮
        imgWidth = $items.width(),//获取滚动元素的宽
        imgCount = $ct.children().size(),//获取有多少个滚动的元素

下面的代码是要实现思路4,5的核心,很重要!

        $ct.prepend($items.last().clone()),
        $ct.append($items.first().clone());
        imgnewwidth = $ct.children().size();
        $ct.css({left:0-imgWidth,width:imgnewwidth*imgWidth})
  • 第一行首先获取到轮播图片元素的最后一张然后clone,然后将clone后的副本prepend到视口的第一个
  • 第二行同理,把第一张clone一下append到最后面
  • 第三行重新计算元素的数量,原本是4个。现在变成了6个(这里要注意!重新计算数量要重新查找DOM元素,不能直接利用上面的$items.size来计算,要重新使用$ct.children().size),不然还是4张!)
  • 第四行设置视口的初始位置和它的总宽度
    然后元素的排列就变成了如下视口图(自己画的有点丑)
Paste_Image.png

其中数字代表的是图片的顺序,因为我们上面设置了视口的初始位置(left:0-imgWidth这里我给设置的图片宽度为500px),那么初始位置就变成了-500px,那么显示的图片就是第一张了(按上面那张图就是第二张)。
接下来开始绑定事件,我们想实现一个功能的时候,要先想能做什么,在去想要怎么做:

    $next.on('click',function(){
                playnext();
            })
    $pre.on('click',function(){
                playpre();
            })

这里我们为前进和后退按钮绑定了事件,当我点前进按钮的时候就会执行playnest函数,然后我们下面再想playnext函数的实现。

        var curidx =0;//声明初始的坐标
        var mov = 1;//移动的次数
            function playnext(){
                $ct.animate({left:'-='+mov*imgWidth},function(){
                    //当点击后,会执行这个动画,把视口向右移动一个图片宽度的距离,就刚好像滚动一样
                    curidx+=mov;//然后坐标加1,表明移动一格
                    if(curidx===imgCount){
                        $ct.css({left:0-imgWidth});
                        curidx=0;
                    }
                    //如果已经移动到了最后一张图片,也就是末尾clone的1图片,就马上将视口设置为刚开始那样,因为同一张图片的变换人是看不出来的,然后再把坐标给设置回0.
                })
            }

反之,后退按钮是一样的:

    function playpre(){
                $ct.animate({left:'+='+mov*imgWidth},function(){
                    curidx-=mov;
                    if(curidx===(-1)){
                        $ct.css({left:0-imgWidth*imgCount});
                        curidx=3;
                    }
                })
            }

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

热门图文

Top