在WEB开发中，时常会用到轮播图，今天来介绍一下swiper当中的自动播放+抓手光标（改变我们光标在swiper页面当中的样式）。

第一步，需要引入swiper.min.css和swiper.min.js两个文件（如果没有可以到swiper中文网下载www.swiper.com.cn）

第二步，HTML部分，我们还是搭建一个基础的swiper页面布局。

<div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">slide 1<img src="logo.png"></div>
                <div class="swiper-slide">slide 2<img src="logo.png"></div>
                <div class="swiper-slide">slide 3<img src="logo.png"></div>
                <div class="swiper-slide">slide 4<img src="logo.png"></div>
                <div class="swiper-slide">slide 5<img src="logo.png"></div>
                <div class="swiper-slide">slide 6<img src="logo.png"></div>
            </div>
</div>

第三步，js部分

<script>
    var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            speed: 2000,
            loop: true,//设置为true时自动播放，默认为false
            observer:true,
            observeParents:true,
            autoplayDisableOnInteraction : false,
            grabCursor:true,  //开启抓手光标
            autoplay: {
            disableOnInteraction: false,
        }
        });
</script>

第四步，效果图

版权声明：本文为li-kang888原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/li-kang888/p/10143800.html