Plugins/swiper342/index.html

微信扫码关注公众号，代码整理好后第一时间通知你。

<!DOCTYPE html>
<html>
<head>
    <title>swiper342示例</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0,uc-fitscreen=yes" />
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <link type="text/css" href="../base.css" rel="stylesheet" />   
    <link rel="stylesheet" type="text/css" href="swiper342.css"/>
    <link rel="stylesheet" type="text/css" href="index.css"/> 	
    <script type="text/javascript" src="../jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="../layout.js"></script>
    <script type="text/javascript" src="swiper342.min.js"></script>
</head>
<body>

<div id="banner">
<ul class="swiper-wrapper">
<li class="swiper-slide"><img class="h35" src="images/IMG_0786.jpg" /></li>
<li class="swiper-slide"><img class="h35" src="images/timg1.jpg" /></li>
<li class="swiper-slide"><img class="h35" src="images/timg.jpg" /></li>
</ul>
<div class="swiper-pagination"></div>
</div>



<script type="text/javascript">
$(document).ready(function () {
 if($("#banner li").length > 1 )
 {
    var swiper = new Swiper("#banner", {
        pagination: ".swiper-pagination",
        paginationClickable: true,       //是否切换到当前图片对应的li 添加事件
        spaceBetween: 0,                 // 每个元素之间的 右外边距。 取值为number
        centeredSlides: true,            // 设置元素位置  取值 true:居中 / 取值 false:居左
        autoplay: 2500,                  //　自动轮播的间隔设置 单位 (ms)
        autoplayDisableOnInteraction: false,  //设置滑动元素后是否自动轮播　取值 false 是启动 / 取值true 不启动
    });
  }
});
</script>

</body>
</html>