swiper轮播图的操作（常用属性和方法）

最新推荐文章于 2024-04-13 17:28:35 发布

Arvin J wenjie

最新推荐文章于 2024-04-13 17:28:35 发布

阅读量9.4k

点赞数 11

分类专栏： swiper 文章标签： javascript html

本文链接：https://blog.csdn.net/Arvin_Jike/article/details/108616555

版权

swiper 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

swiper 个人常用属性与方法

1.切换方向（默认水平切换，不写就等于默认水平切换）；


//垂直切换：
direction: 'vertical',
//默认水平切换(如需水平切换，下面的这句代码可以不写)：
direction: 'horizontal',

2.更改左右按钮&&分页器（默认圆点）的样式（默认为蓝色）；


.swiper-container{
    --swiper-theme-color: #ff6600;//左右按钮
    --swiper-pagination-color: #00ff33;//分页器
  }

分页器：默认为10*10px 的span标签，利用css对分页器进行样式修改；


/* 单独修改分页器的css样式，swiper默认是10*10的span */
.swiper-container .swiper-pagination span{
    width: 16px;
    height: 16px;
    --swiper-pagination-color: red;
}

3.点击分页器某个点，跳转到该页（默认为false）


clickable: true,

4.鼠标滑过，箭头变手型（默认为false，想要变化为小手，设置为true）；


grabCursor: true,

5.循环模式（默认为false）：是否在最后加上一张猫腻图；


loop: true,

6.自动切换（默认为false）；


autoplay:true,//默认3秒

//等同于以下设置
autoplay: {
    delay: 3000,//自动切换时间；

//与loop有关，设置为true，loop失效
    stopOnLastSlide: false,

//用户操作之后，是否禁止自动切换（默认true禁止/设置false允许）
    disableOnInteraction: false,
},

7.鼠标移入（移出），自动切换停止（开启）；


//鼠标移入，停止自动切换
mySwiper.el.onmouseover = function(){
  mySwiper.autoplay.stop();
}

//鼠标离开，开始自动切换
mySwiper.el.onmouseout = function(){
  mySwiper.autoplay.start();
}

8.鼠标移动，是否显示左右按钮（箭头）；js与css配合使用；


//鼠标移出隐藏按钮，移入显示按钮。配合css样式使用

mySwiper.el.onmouseover=function(){
  mySwiper.navigation.$nextEl.removeClass('hide');
  mySwiper.navigation.$prevEl.removeClass('hide');
}

mySwiper.el.onmouseout=function(){
  mySwiper.navigation.$nextEl.addClass('hide');
  mySwiper.navigation.$prevEl.addClass('hide');
}


//css样式，透明度设置
.swiper-container .hide{
  opacity:0;
}
.swiper-button-next,.swiper-button-prev{
  transition:opacity 0.5s;
}

案例（版本为swiper5）：


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <!-- 引入css文件 -->
    <link rel="stylesheet" href="./css/swiper.css">
    <style>
        /* 最外层盒子 */
        .swiper-container {
            width: 680px;
            height: 240px;
            margin-top: 130px;
        }

        /* 图片 */
        .swiper-container img {
            display: block;
            height: 240px;
            width: 100%;
            overflow: hidden;
        }

        /* 左右按钮 */
        .swiper-container .swiper-button-prev,
        .swiper-container .swiper-button-next {
            height: 24px;
            margin: auto;
        }
        
        /* 改变左右箭头、分页器的样式 */
        .swiper-container{
            /* 左右箭头按钮 */
            --swiper-theme-color: #ff6600;
            /* 分页器 */
            /* --swiper-pagination-color: #00ff33; */
        }

        /* 单独修改分页器的css样式，swiper默认是10*10的span */
        .swiper-container .swiper-pagination span{
            width: 16px;
            height: 16px;
            --swiper-pagination-color: red;
        }
        
        /* 移动鼠标，隐藏显示左右按钮，配合js使用 */
        .swiper-container .hide{
        opacity:0;
        }
        .swiper-button-next,.swiper-button-prev{
        transition:opacity 0.5s;
        }
    </style>
</head>

<body>
    <!-- html内容按照要求和需求，无需此处加入猫腻图 -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="images/banner1.jpg"></div>
            <div class="swiper-slide"><img src="images/banner2.jpg"></div>
            <div class="swiper-slide"><img src="images/banner3.jpg"></div>
            <div class="swiper-slide"><img src="images/banner4.jpg"></div>
            <div class="swiper-slide"><img src="images/banner5.jpg"></div>
            <div class="swiper-slide"><img src="images/banner6.jpg"></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

    </div>
    <!-- 此处，引入js文件 -->
    <script src="./js/swiper.js"></script>
    <script>
        // new Swiper函数，第一个参数为挂载元素（可以使用自定义class和id），第二个参数为指定的功能函数
        var mySwiper = new Swiper('.swiper-container', {
            // direction: 'vertical', // 垂直切换选项

            loop: true, // 循环模式选项，相当于切换到最后一张图片时，加上一张猫腻图，不加上，会出现直接从最后一张拉拽到第一张

            // 自由切换
            autoplay: {
            delay: 1000,//自动切换时间
            stopOnLastSlide: false,//与loop有关，设置为true，loop失效
            disableOnInteraction: false,//用户操作之后，是否禁止自动切换（默认true禁止/设置false允许）
            },
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',//挂载的元素
                clickable :true,//点击分页器某个点，跳转到该点击的页面
            },

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',//左按钮
                prevEl: '.swiper-button-prev',//右按钮
            },
            //鼠标移入从 箭头 变 小手
            grabCursor : true,
        }) 

        // 鼠标移入轮播图范围，执行的函数
        mySwiper.el.onmouseover = function(){
        //鼠标进入，停止自动切换
        mySwiper.autoplay.stop();

        // 鼠标移入，显示左右按钮，配合样式使用
        mySwiper.navigation.$nextEl.removeClass('hide');
        mySwiper.navigation.$prevEl.removeClass('hide');
        }
    
         // 鼠标移出轮播图范围，执行的函数
        mySwiper.el.onmouseout = function(){
        //鼠标移出，开始自动切换    
        mySwiper.autoplay.start();

        // 鼠标移出，显示左右按钮，配合样式使用
        mySwiper.navigation.$nextEl.addClass('hide');
        mySwiper.navigation.$prevEl.addClass('hide');
        }     
    </script>
</body>

</html>

Arvin J wenjie

关注

11
点赞
踩
49

收藏

觉得还不错? 一键收藏
0
评论
swiper轮播图的操作（常用属性和方法）

swiper 个人常用属性与方法1.切换方向（默认水平切换，不写就等于默认水平切换）；//垂直切换：direction: 'vertical',//默认水平切换(如需水平切换，下面的这句代码可以不写)：direction: 'horizontal',2.更改左右按钮&&分页器（默认圆点）的样式（默认为蓝色）；分页器：默认为10*10px 的span标签，可以单独利用css进行样式修改；.swiper-container{ --swiper-theme-
复制链接

扫一扫