Swiper.js实现无缝滚动

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.效果如下：

演示效果（图片来源网络）

Swiper.js实现无缝滚动相关推荐

JS左右无缝滚动（一般方法+面向对象方法）
其实不管是一般方法还是面向对象的方法都还有很多可以改进的地方,有需要的先将就着用吧!-_- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...
js自下而上无缝滚动
js自下而上无缝滚动的小例子,能兼容ie8 鼠标悬停时可以停止滚动 function scrollup(){ if(box.scrollTop>=l1.offsetHeight){ //滚动条距 ...
css 实现跑马灯/走马灯无缝衔接 js实现无缝滚动图片
先上效果图首先呈上效果图,主要是针对图片跑马灯效果(请忽略我的快速播放和录屏图标) 具体实现方式目前我需要展示6张图片,但是为了实现无缝衔接,我的列表放了12张(放2遍图片),这样就不至于在切换时 ...
js水平无缝滚动代码实例详解
本章节分享一段代码实例,它实现了图片无缝水平滚动效果. 这样的功能在实际应用中比较常见,感兴趣的朋友可以做一下参考. 代码如下: <!doctype html> <html> ...
原生js实现无缝滚动
水平方向无缝滚动滚动支持图片,文字原理 :一个大的盒子中放置两个盒子,通过设置offsetWidth,scrollLeft的关系来实现,而且还用到定时器函数setInterval,当手指移动上去定 ...
不用js实现无缝滚动---marquee
marquee标签:创建一个滚动的文章字幕,应用于文字.图片.表格基本语法: <marquee>文字.图片代码.Flash动画代码和gif动态小代码</marquee> m ...
swiper实现匀速无缝滚动
设置属性 speed:2500,//匀速时间 autoplay: {delay: 0,stopOnLastSlide: false,disableOnInteraction: true, }, 样式需 ...
css + js实现简单无缝滚动字幕
css + js实现无缝滚动字幕利用js和css就可以很方便的实现一个无缝滚动字幕,使得列表在一个方框里不停滚动目录 css js实现无缝滚动字幕实现思路 html 代码 css 代码 js 代 ...
android 动画无缝滚动,CSS3动画之无缝滚动
与js的无缝滚动类似,整个承载图片的盒子移动,克隆一组图片放置最后,当一组图片播放结束后将盒子定位在有一组图片宽度的左侧 HTML结构:

Swiper.js实现无缝滚动

1. 引入Swiper.js

其他获取方式

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

3.js中设置滚动效果

4.效果如下：

Swiper.js实现无缝滚动相关推荐

最新文章

热门文章