1. 引入Swiper.js

 <script src="/static/swiper/swiper-bundle.min.js"></script>

其他获取方式

通过NPM获取Swiper

$ npm install swiper

swiper.js下载路径:下载Swiper - Swiper中文网Swiper各版本的下载地址,Swiper百度网盘下载https://www.swiper.com.cn/download/index.html

2. 在HTML文件中加入无缝滚动的图片

<div class="swiper">
   <div class="swiper-wrapper">
       <div class="swiper-slide slide-item" >
          <img src="/static/images/img(1).jpg">
          <img src="/static/images/img(2).jpg">
          <img src="/static/images/img(3).jpg">
          <img src="/static/images/img(4).jpg">
          <img src="/static/images/img(5).jpg">
          <img src="/static/images/img(6).jpg">
       </div>
    </div>
</div>

3.js中设置滚动效果

var mySwiper = new Swiper('.swiper', {
    slidesPerView: 'auto',
    speed: 10000, //滚动速度
    freeMode: true,
    loop: true,
    autoplay: {
        delay: 0,
        disableOnInteraction: false, //就算触摸了也继续滚动
        loopPreventsSlide: true,
    },
    paginationClickable: true
})

如果想要实现鼠标移入滚动暂定,鼠标离开继续滚动

$('.swiper').on('mouseenter', function(e){
    mySwiper.stopAutoplay();
})
$('.swiper').on('mouseleave', function(e){      
     mySwiper.startAutoplay();
});

4.效果如下:

演示效果(图片来源网络)

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐