swiper.js插件实现图片滚动效果插件

swiper.js插件实现图片滚动效果
1、页面初始化效果：

文章图片

2、Html如下

为你霸屏 - 锐客网样式选择文章图片文章图片文章图片文章图片

3、css如下 【swiper.js插件实现图片滚动效果】

body{ background-color: #f5f5f5; }.paScreenTxt{ font-family: 微软雅黑; font-size:2vh; color:#7bbbda; letter-spacing: 4px; margin-left: 3.5vh; margin-top: 3vh; font-weight: 700; }.checkIcon{ z-index: 2; position: absolute; width: 6%; right: 6%; top: 10%; }.swiper-container{ width: 96%; }.swiper-wrapper{ text-align: center; }.swiper_img{ width:100%; }

4、js如下

$(function(){ var mySwiper = new Swiper(".swiper-container",{ direction:"horizontal",/*横向滑动*/ loop:true,/*形成环路（即：可以从最后一张图跳转到第一张图*/ prevButton:".swiper-button-prev",/*前进按钮*/ nextButton:".swiper-button-next",/*后退按钮*/ }); });