如何使用swiper来实现简单的自动轮播

最近有要实现轮播和3D轮播的一个页面。所以呢，想记录一下这样的一个过程。以下是我做轮播的一个步骤：

一、引入相关的CSS、JS文件

1.下载好了swiper相关的css、js文件的话，直接在html文件头部引入：

//意思是我引入了与index.html同级的css文件夹下的swiper.min.css文件

//意思是我引入了与index.html同级的js文件夹下的swiper.min.js

2. 注：如果你不想将Swiper文件放在你的项目中，你可以使用Swiper的CDN服务。下面这个链接有你想要的Swiper相关的CDN。 http://www.swiper.com.cn/cdn/index.html

二、在html中写轮播代码

                                <!--轮播图-->
				<div class="swiper-container">
					<ul class="swiper-wrapper">
						<li class="swiper-slide">
							<a href="#">
							    <img src="img/1.png"/>
							</a>
						</li>
						<li class="swiper-slide">
							<a href="#">
							    <img src="img/2.png"/>
							</a>
						</li>
						<li class="swiper-slide">
							<a href="#">
							    <img src="img/3.png"/>
							</a>
						</li>
						<li class="swiper-slide">
							<a href="#">
							    <img src="img/4.png"/>
							</a>
						</li>
					</ul>
				</div>
				<!--轮播图结束-->

三、在<script></script>中写相关的脚本

                <script>
			//轮播效果
			new Swiper('.swiper-container', {
				loop:true,                 //loop是保证swiper轮播图的图片是循环播放的
				autoplay: {                //自动播放轮播
					delay: 1000,       //自动切换图片的间隔时间时间延迟
//					stopOnLastSlide: false,    
//				        disableOnInteraction: false,
				}
			});
		</script>

四、实现轮播的文件目录及相关代码

1.实现效果的项目目录文件截图：

2.实现代码如图：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>轮播</title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/Swiper/3.4.2/css/swiper.min.css">
		<style>
			.swiper-container{
				position: absolute;
				width: 50%;
				left: 30%;
				top: 20%;
			}
			img {
			    display: block;
			    width: 100%;
			}
			
			ul{
				list-style: none;
			}
		</style>
	</head>
	<body>
		<!--轮播图-->
		<div class="swiper-container">
			<ul class="swiper-wrapper">
				<li class="swiper-slide">
					<a href="#">
					    <img src="img/1.png"/>
					</a>
				</li>
				<li class="swiper-slide">
					<a href="#">
					    <img src="img/2.png"/>
					</a>
				</li>
				<li class="swiper-slide">
					<a href="#">
					    <img src="img/3.png"/>
					</a>
				</li>
				<li class="swiper-slide">
					<a href="#">
					    <img src="img/4.png"/>
					</a>
				</li>
			</ul>
		</div>
		<!--轮播图结束-->
		
		<script type="text/javascript" src="https://d.apps.yayawan.com/videos/swiper.min.js"></script>
		<script>
			//轮播效果
			new Swiper('.swiper-container', {
				loop:true,                  //loop是保证swiper轮播图的图片是循环播放的
				autoplay: {                 //自动播放轮播
					delay: 1000,          	//自动切换图片的间隔时间时间延迟
//					stopOnLastSlide: false,    
//				        disableOnInteraction: false,
				}
			});
		</script>
	</body>
</html>

这样子的话，最终就会实现这个简单的轮播啦。但其实我们平时经常会用到的还有就是轮播图下方的这个小圆点pagination，控制导航方向的前进后退按钮navigation。具体的可以看Swiper中文网进行学习。里面还有一些基础的实例演示，以及移动端、web端的一些演示，方便我们学习。链接如下：

http://www.swiper.com.cn/api/index.html

到这，我就讲完了实现这个简单轮播的步骤了。

如何使用swiper来实现简单的自动轮播

猜你喜欢