轮播图以及幻灯片播放

最新推荐文章于 2021-02-27 14:49:29 发布

凌凌小博客

最新推荐文章于 2021-02-27 14:49:29 发布

阅读量1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_35923749/article/details/77781920

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

轮播图以及幻灯片播放

做项目开发的时候，已经需要使用到轮播图，所以掌握一种熟练并且好用的轮播图插件是很有必要的，经过多个亲身试验，我发现这个一个非常好用的轮播图插件，可以实现各种自定义，并且还能自适应屏幕。

就是这款swiper插件，功能超级齐全，基本满足各种自定义需求，官方说明文档是：swiper说明文档

1、首先必须引用这三个外部文件

这三个文件加上demo已经上传了，点击下载

2、html代码，

<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/lizi.jpg" style="height: 14rem;width: 100%;" /></div>
<div class="swiper-slide"><img src="img/miao.jpg" style="height: 14rem;width: 100%;" /></div>
</div>




<div class ="swiper-button-prev swiper-button-black"></div>
<div class ="swiper-button-next swiper-button-black"></div>



</div>

3、进行初始化：

var mySwiper = new Swiper ('.swiper-container', { //注：swiper-container是一个div的的class名字，也可以用#swiper-container，但这是div的id名字
autoplay: 2000,
// direction: 'vertical',
loop: true,
speed:2000,

// // 如果需要分页器
// pagination: '.swiper-pagination',

// // 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',

// // 如果需要滚动条
// scrollbar: '.swiper-scrollbar',
})

是不是发现调用这个轮播图如此简单，如果还需要满足复杂的需求，可以点击上面那个链接进入查看官方文档说明

完整代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		
		<link href="css/swiper-3.4.2.min.css" type="text/css" rel="stylesheet"/>
        <link href="css/demo.css" type="text/css" rel="stylesheet"/>
        
        <script src="http://api.map.baidu.com/api?key=&v=1.4&services=true" type="text/javascript"></script>
        <script src="js/jquery-1.8.3.min.js"></script>
        <script src="js/demo.js"></script>
		<script src="js/swiper-3.4.2.jquery.min.js"></script>
		<script src="js/swiper-3.4.2.min.js"></script>
 
	</head>

	<body>
		<div id="map_container"></div>
		<!--保修详情-->
		<div class="repair_detail">
			<div class="titlle">报修详情</div>
			<div class="detail">
				车牌编号<span id="car_liscence_number" class="car_liscence_number">123456</span>
				停靠车桩号<span id="parking_num" class="car_liscence_number">556321</span>
				<p id="reqpair_reason">轮胎爆胎，车头松了</p>
				<img src="img/lizi.jpg" id="description_img">
			</div>
		</div>
		
		<!--轮播图-->
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="img/lizi.jpg" style="height: 14rem;width: 100%;" /></div>
				<div class="swiper-slide"><img src="img/miao.jpg" style="height: 14rem;width: 100%;" /></div>
			</div>
			 <!--如果需要分页器--> 
			 <!--<div class ="swiper-pagination"></div>--> 

			<!-- 如果需要导航按钮 -->
			 <div class ="swiper-button-prev swiper-button-black"></div>
			 <div class ="swiper-button-next swiper-button-black"></div> 

			<!-- 如果需要滚动条 -->
			 <!--<div class ="swiper-scrollbar"></div>--> 
		</div>
	</body>

 <script>        
   var mySwiper = new Swiper ('.swiper-container', {
     	autoplay: 2000,
       // direction: 'vertical',
       loop: true,
       speed:2000,
    
//     // 如果需要分页器
//        pagination: '.swiper-pagination',
    
//     // 如果需要前进后退按钮
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
    
//     // 如果需要滚动条
//    scrollbar: '.swiper-scrollbar',
  })        
   </script>
</html>

凌凌小博客

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
轮播图以及幻灯片播放

轮播图以及幻灯片播放做项目开发的时候，已经需要使用到轮播图，所以掌握一种熟练并且好用的轮播图插件是很有必要的，经过多个亲身试验，我发现这个一个非常好用的轮播图插件，可以实现各种自定义，并且还能自适应屏幕。就是这款swiper插件，功能超级齐全，基本满足各种自定义需求，官方说明文档是：swiper说明文档1、首先必须引用这三个外部文件&lt;link href="css/swiper...
复制链接

扫一扫