jquery responsiveslides响应式幻灯片插件


jquery responsiveslides响应式幻灯片插件
jquery responsiveslides响应式幻灯片插件以及响应式幻灯片等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/responsiveslides.css">
<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/responsiveslides.min.js"></script>

3. HTML代码

<div id="wrapper">
	<!-- Slideshow 1 -->
	<ul class="rslides" id="slider1">
		<li><img src="images/1.jpg" alt=""></li>
		<li><img src="images/2.jpg" alt=""></li>
		<li><img src="images/3.jpg" alt=""></li>
	</ul>
	<!-- Slideshow 2 -->
	<ul class="rslides" id="slider2">
		<li><a href="#"><img src="images/1.jpg" alt=""></a></li>
		<li><a href="#"><img src="images/2.jpg" alt=""></a></li>
		<li><a href="#"><img src="images/3.jpg" alt=""></a></li>
	</ul>
	<!-- Slideshow 3 -->
	<ul class="rslides" id="slider3">
		<li><img src="images/1.jpg" alt=""></li>
		<li><img src="images/2.jpg" alt=""></li>
		<li><img src="images/3.jpg" alt=""></li>
	</ul>
	<!-- Slideshow 3 Pager -->
	<ul id="slider3-pager">
		<li><a href="#"><img src="images/1_thumb.jpg" alt=""></a></li>
		<li><a href="#"><img src="images/2_thumb.jpg" alt=""></a></li>
		<li><a href="#"><img src="images/3_thumb.jpg" alt=""></a></li>
	</ul>
	<!-- Slideshow 4 -->
	<div class="callbacks_container">
		<ul class="rslides" id="slider4">
			<li>
				<img src="images/1.jpg" alt="">
				<p class="caption">This is a caption</p>
			</li>
			<li>
				<img src="images/2.jpg" alt="">
				<p class="caption">This is another caption</p>
			</li>
			<li>
				<img src="images/3.jpg" alt="">
				<p class="caption">The third caption</p>
			</li>
		</ul>
	</div>
</div>

相关推荐

发表评论

相关文章