jquery图片制作图片叠加轮播旋转切换插件


jquery图片制作图片叠加轮播旋转切换插件
jquery图片制作图片叠加轮播旋转切换插件以及图片叠加轮播、旋转切换等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/PicCarousel.js"></script>

3. HTML代码

<div class="poster-main A_Demo">
	<div class="poster-btn poster-prev-btn"></div>
	<ul class="poster-list">
		<li class="poster-item"><a href="#"><img src="img/1.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="#"><img src="img/2.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="#"><img src="img/3.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="#"><img src="img/4.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="#"><img src="img/5.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="#"><img src="img/6.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="#"><img src="img/7.jpg" width="100%" ></a></li>
	</ul>
	<div class="poster-btn poster-next-btn"></div>
</div>
<div class="poster-main B_Demo" style="margin-top:100px">
	<div class="poster-btn poster-prev-btn"></div>
	<ul class="poster-list">
		<li class="poster-item"><a href="#"><img src="img/1.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="#"><img src="img/2.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="#"><img src="img/3.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="#"><img src="img/4.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="#"><img src="img/5.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="#"><img src="img/6.jpg" width="100%" ></a></li>
		<li class="poster-item"><a href="#"><img src="img/7.jpg" width="100%" ></a></li>
	</ul>
	<div class="poster-btn poster-next-btn"></div>
</div>
<script type="text/javascript">
$(".A_Demo").PicCarousel("init");
$(".B_Demo").PicCarousel({
	"width":1000,		//幻灯片的宽度
	"height":300,		//幻灯片的高度
	"posterWidth":520,	//幻灯片第一帧的宽度
	"posterHeight":300, //幻灯片第一张的高度
	"scale":0.9,		//记录显示比例关系
	"speed":1500,		//记录幻灯片滚动速度
	"autoPlay":true,	//是否开启自动播放
	"delay":1000,		//自动播放间隔
	"verticalAlign":"top"	//图片对齐位置
});
</script>

相关推荐

发表评论

相关文章