html结合js实现轮播图原理_html图片自动播放实现原理-优快云博客

本文链接：https://blog.youkuaiyun.com/ls_636/article/details/102554003

html结合js实现轮播图原理

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>轮播图</title>
	</head>
	<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
	<link rel="stylesheet" href="css/swiper.min.css" />
	<script type="text/javascript" src="js/swiper.min.js"></script>
	<link rel="stylesheet" href="css/btomlunbo.css" />
	<link rel="stylesheet" href="css/index_one.css" />
	<link rel="stylesheet" href="css/index_two.css" />
	<link rel="stylesheet" href="css/index_threr.css" />
	<link rel="stylesheet" href="css/index_four.css" />
	<!--<script type="text/javascript" src="js/mouserol.js" ></script>-->
	<script type="text/javascript" src="js/fxlunbo.js"></script>
	<body>
		<center>
			<div id="LoopDiv">
				<input id="S_Num" type="hidden" value="8" />
				<div id="starsIF" class="imageflow">
					<img src="img/1-01.jpg" alt="Picture" />
					<img src="img/1-02.jpg" alt="Picture" />
					<img src="img/1-03.jpg" alt="Picture" />
					<img src="img/1-04.jpg" alt="Picture" />
					<img src="img/1-05.jpg" alt="Picture" />
				</div>
			</div>		
		</center>		
	</body>

	<script>
		//swiper图片轮播插件
		var swiper = new Swiper('.swiper-container', {
			pagination: '.swiper-pagination', //分页器
			paginationClickable: true, //分页器可点击却换轮播
			loop: true, //循环播放
			autoplay: 2000 //自动轮播间隔时间
		});
	</script>

</html>