jQuery多张图片叠加旋转木马切换效果特效代码下载


jQuery多张图片叠加旋转木马切换效果特效代码下载
jQuery多张图片叠加旋转木马切换效果特效代码下载以及多张图片叠加、旋转木马切换等js/jquery网页特效代码下载。

1. 引入CSS

<link type="text/css" rel="stylesheet" href="css/carousel.css">
<link type="text/css" rel="stylesheet" href="css/carousel.css">

2. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/carousel.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/carousel.js"></script>

3. HTML代码

<!doctype html>
<html>
<head>
<!--sucai58.com 专注html3+css3素材的网站-->
<meta charset="utf-8">
<title>旋转木马 幻灯片开发</title>
</head>
<body style="padding:50px;">
<div class="J_Poster poster-main" data-setting='{
	"width":1000,
	"height":270,
	"posterWidth":640,
	"posterHeight":270,
	"scale":0.8,
	"autoPlay":true,
	"delay":2000,
	"speed":300
}'>
	<div class="poster-btn poster-prev-btn"></div>
	<ul class="poster-list">
		<li class="poster-item"><a href="#"><img src="images/1.jpg" width="100%" height="100%"></a></li>
		<li class="poster-item"><a href="#"><img src="images/2.jpg" width="100%" height="100%"></a></li>
		<li class="poster-item"><a href="#"><img src="images/3.jpg" width="100%" height="100%"></a></li>
		<li class="poster-item"><a href="#"><img src="images/4.jpg" width="100%" height="100%"></a></li>
		<li class="poster-item"><a href="#"><img src="images/5.jpg" width="100%" height="100%"></a></li>
		<li class="poster-item"><a href="#"><img src="images/2.jpg" width="100%" height="100%"></a></li>
		<li class="poster-item"><a href="#"><img src="images/3.jpg" width="100%" height="100%"></a></li>
		<li class="poster-item"><a href="#"><img src="images/4.jpg" width="100%" height="100%"></a></li>
		<li class="poster-item"><a href="#"><img src="images/5.jpg" width="100%" height="100%"></a></li>
	</ul>
	<div class="poster-btn poster-next-btn"></div>
</div>
<p style="height:50px;"></p>
<div class="J_Poster poster-main" data-setting='{
	"width":800,
	"height":270,
	"posterWidth":640,
	"posterHeight":270,
	"scale":0.8,
	"autoPlay":true,
	"delay":5000,
	"speed":300,
	"vericalAlign":"top"
}'>
	<div class="poster-btn poster-prev-btn"></div>
	<ul class="poster-list">
		<li class="poster-item"><a href="#"><img src="images/1.jpg" width="100%" height="100%"></a></li>
		<li class="poster-item"><a href="#"><img src="images/2.jpg" width="100%" height="100%"></a></li>
		<li class="poster-item"><a href="#"><img src="images/3.jpg" width="100%" height="100%"></a></li>
		<li class="poster-item"><a href="#"><img src="images/4.jpg" width="100%" height="100%"></a></li>
	</ul>
	<div class="poster-btn poster-next-btn"></div>
</div>
<script type="text/javascript">
$(function(){
	Carousel.init($(".J_Poster"));
});
</script>
</body>
</html>

相关推荐

发表评论

相关文章