大家好，欢迎来到IT知识分享网。 swiper轮播图的操作（常用属性和方法）"

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>

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/10154.html

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

swiper 个人常用属性与方法

案例（版本为swiper5）：

相关推荐

发表回复