swiper进行分组轮播（分组js）

最新推荐文章于 2024-11-10 21:43:01 发布

原创最新推荐文章于 2024-11-10 21:43:01 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

javascript 同时被 3 个专栏收录

21 篇文章

订阅专栏

前端

21 篇文章

订阅专栏

jquery

11 篇文章

订阅专栏

这段代码展示了如何使用Swiper库创建一个自动播放的图片轮播效果。它包括设置HTML结构，引入jQuery和Swiper库，以及JavaScript代码来初始化Swiper实例，实现轮播的循环和自动切换功能。

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/3.4.2/js/swiper.jquery.js"></script>

</head>

<body>
    <div class="bd swiper-container" id="ban_swiper">
        <div class="picList swiper-wrapper">
            <li class="p_li">...1</li>
            <li class="p_li">...1</li>
            <li class="p_li">...1</li>
            <li class="p_li">...1</li>
            <li class="p_li">...1</li>
            <li class="p_li">...1</li>
            <li class="p_li">...2</li>
            <li class="p_li">...2</li>
        </div>
    </div>
     <div class="swiper-pagination"></div>
</body>
</html>

<script>
function fen(item, num) {
    var num = num || 1;
    var items = item;
    var item = `${item} li`;
    var yn = $(item).length % num;
    if (yn != 0 && $(item).length > num) {
        var cn = num - yn;
        for (let n = 0; n < cn; n++) {
            $(item).eq(n).clone().appendTo(items);
        }
    } else if (yn != 0 && $(item).length < num) {
        var cn = 2 * num - yn;
        for (let n = 0; n < cn; n++) {
            $(item).eq(n).clone().appendTo(items);
        }
    }
    $(item).each(
        function (i) {
            $(item).slice(i * num, i * num + num).wrapAll("<ul class='swiper-slide'></ul>");
        });
    
}
</script>
<script>
fen(".picList", 12);
var ban_swiper = new Swiper('#ban_swiper', {
      autoplay:4000,//可选选项，自动滑动
      autoplayDisableOnInteraction : false,
      //direction: 'vertical', // 垂直切换选项
      loop: true, // 循环模式选项
      speed:1000,
     // effect:'fade',
      pagination : '.swiper-pagination',
      paginationClickable :true,
    //   prevButton:'.bannerBox .swiper-button-prev',
    //   nextButton:'.bannerBox .swiper-button-next',
    })     
</script>