1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

swiper方法

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>  		<link rel="stylesheet" href="uu/swiper-4.4.1.min.css">  		<style type="text/css">  			.swiper-container {      		width: 1226px;     			height: 300px;     			margin: 100px auto;  		}    		.swiper-container .swiper-wrapper .swiper-slide{  			background: dodgerblue;  			text-align: center;  			line-height: 300px;  			color: white;  			font-size: 30px;  		}  		</style>  	</head>  	<body>  <!--自己写两个按钮来控制-->  <input type="button" name="" id="zuo" value="后退" />  <input type="button" name="" id="rou" value="前进" />    		<div class="swiper-container">      <div class="swiper-wrapper">          <div class="swiper-slide">1</div>          <div class="swiper-slide">2</div>          <div class="swiper-slide">3</div>          <div class="swiper-slide">4</div>          <div class="swiper-slide">5</div>          <div class="swiper-slide">6</div>          <div class="swiper-slide">7</div>          <div class="swiper-slide">8</div>          <div class="swiper-slide">9</div>          <div class="swiper-slide">10</div>      </div>      		<script src="uu/swiper-4.4.1.min.js"></script>  		<script>            var mySwiper = new Swiper ('.swiper-container', {    	slidesPerView : 5, //网格分布,显示5个格    	slidesPerGroup : 5, //一组为5个格    	spaceBetween : 14, //每个格间隔(距)14像素    	      direction: 'horizontal', // 垂直切换选项      loop: true, // 循环模式选项              })         document.getElementById('zuo').onclick=function(){    	mySwiper.slidePrev(1000);   //slidePrev(1000)  可以传参数 1秒钟,下面的一样可以    也可以加回调函数    }    document.getElementById('rou').onclick=function(){    	mySwiper.slideNext();    }    </script>  	</body>  </html>

上面代码效果图片:

原文链接:https://www.qiquanji.com/post/7693.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: