master

分支 (1)

管理

管理

master

Slider
/
index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<title>轮播图</title>
		<link rel="stylesheet" href="css/jquery.hislide.css" />
		<style>
		</style>
	</head>
	<body>
		<!-- 第一个轮播模块 -->
		<div class="slide hi-slide">
			<div class="hi-prev "></div>
			<div class="hi-next "></div>
			<ul>
				<li><img src="images/1.jpg" alt="轮播图片1" /></li>
				<li><img src="images/2.jpg" alt="轮播图片2" /></li>
				<li><img src="images/3.jpg" alt="轮播图片3" /></li>
				<li><img src="images/4.jpg" alt="轮播图片4" /></li>
				<li><img src="images/5.jpg" alt="轮播图片5" /></li>
				<li><img src="images/6.jpg" alt="轮播图片6" /></li>
				<li><img src="images/7.jpg" alt="轮播图片7" /></li>
			</ul>
		</div>

		<!-- 第二个轮播模块 -->
		<div id="mySlide" class="hi-slide">
			<section class="hi-prev "></section>
			<section class="hi-next "></section>
			<ul>
				<li><img src="images/1.jpg" alt="轮播图片1" /></li>
				<li><img src="images/2.jpg" alt="轮播图片2" /></li>
				<li><img src="images/3.jpg" alt="轮播图片3" /></li>
				<li><img src="images/4.jpg" alt="轮播图片4" /></li>
				<li><img src="images/5.jpg" alt="轮播图片5" /></li>
				<li><img src="images/6.jpg" alt="轮播图片6" /></li>
				<li><img src="images/7.jpg" alt="轮播图片7" /></li>
			</ul>
		</div>

		<!-- 第三个轮播模块 -->
		<div class="slide hi-slide">
			<section class="hi-prev "></section>
			<section class="hi-next "></section>
			<ul>
				<li><img src="images/1.jpg" alt="轮播图片1" /></li>
				<li><img src="images/2.jpg" alt="轮播图片2" /></li>
				<li><img src="images/3.jpg" alt="轮播图片3" /></li>
				<li><img src="images/4.jpg" alt="轮播图片4" /></li>
				<li><img src="images/5.jpg" alt="轮播图片5" /></li>
				<li><img src="images/6.jpg" alt="轮播图片6" /></li>
				<li><img src="images/7.jpg" alt="轮播图片7" /></li>
			</ul>
		</div>

		<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
		<script type="text/javascript" src="js/jquery.hislide.js" ></script>
		<script>
			$('.slide').hiSlide();
			$('#mySlide').hiSlide({
				interval: 3000,
				speed: 500
			});
		</script>
	</body>
</html>