jquery幻灯片插件带滚动条的圆形立体图片旋转滚动



318 1269 424



特效描述:幻灯片插件 带滚动条图片 圆形立体图片 旋转滚动,jquery幻灯片插件制作3D旋转木马图片旋转滚动,设置水平滚动条控制圆形立体图片旋转滚动。支持水平拖动滚动条图片旋转滚动。

代码结构

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.carousel.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>

3. HTML代码

	<div id="wide-wrapper">
		<div id="header">
			<a href="http://www.17sucai.com/"><img src="images/name.jpg" width="280" height="50" alt="3d carousel"/></a>
		</div>
		<ul id="carousel">
			<li>
				<img src="images/image1.jpg" alt=""/>
				<div class="tooltip">Image description</div>
			</li>
			<li><img src="images/image2.jpg" alt=""/></li>
			<li><img src="images/image3.jpg" alt=""/></li>
			<li>
				<img src="images/image4.jpg" alt=""/>
				<div class="tooltip"><u>Image title</u><br/><br alt=""/>Tooltips support <i>HTML</i> text.</div>
			</li>
			<li><img src="images/image5.jpg" alt=""/></li>
			<li><img src="images/image6.jpg" alt=""/></li>
			<li>
				<img src="images/image7.jpg" alt=""/>
				<div class="tooltip"><u>Image title</u><br/><br/><img src="images/image7.jpg" width="60" height="50" style="float:left; margin-right:10px; margin-bottom:10px;" alt=""/>Load images inside the tooltip.</div>
			</li>
			<li><img src="images/image8.jpg" alt=""/></li>
			<li><img src="images/image9.jpg" alt=""/></li>
			<li>
				<img src="images/image10.jpg" alt=""/>
				<div class="tooltip">Image description</div>
			</li>
			<li><img src="images/image11.jpg" alt=""/></li>
			<li><img src="images/image12.jpg" alt=""/></li>
			<li>
				<img src="images/image13.jpg" alt=""/>
				<div class="tooltip"><u>Image title</u><br/><br/>Tooltips support <i>HTML</i> text.</div>
			</li>
			<li><img src="images/image14.jpg" alt=""/></li>
			<li><img src="images/image15.jpg" alt=""/></li>
			<li>
				<img src="images/image16.jpg" alt=""/>
				<div class="tooltip"><u>Image title</u><br/><br/><img src="images/image16.jpg" width="60" height="50" style="float:left; margin-right:10px; margin-bottom:10px;" alt=""/>Load images inside the tooltip.</div>
			</li>
			<li><img src="images/image17.jpg" alt=""/></li>
			<li><img src="images/image18.jpg" alt=""/></li>
			<li><img src="images/image19.jpg" alt=""/></li>
		</ul>
	</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动 自动滚动图片轮播 叠加浮动层 层叠叠加 图片叠加 滚动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到