基于jQuery实现3d图片旋转切换



79 313 105



特效描述:基于jQuery实现 3d图片 旋转切换,基于jQuery实现3d图片旋转切换

代码结构

1. 引入JS

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.roundabout.js"></script>

2. HTML代码

	<ul class="roundabout" id="myroundabout"> 
		<li><img src="img/slide1.jpg"></li> 
		<li><img src="img/slide2.jpg"></li> 
		<li><img src="img/slide3.jpg"></li> 
		<li><img src="img/slide4.jpg"></li> 
		<li><img src="img/slide5.jpg"></li> 
	</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.roundabout.js"></script> 
<script type="text/javascript" src="js/jquery.roundabout-shapes.js"> </SCRIPT>
<script type="text/javascript"> 
$(document).ready(function() {
	$('#myroundabout').roundabout({
		autoplay: true,//自动播放
		autoplayDuration: 3000,//时间
		autoplayPauseOnHover: true,//自动鼠标移上停滞
		shape: 'figure8',  //支持属性theJuggler、figure8、waterWheel、square、conveyorBeltLeft、conveyorBeltRight、goodbyeCruelWorld、diagonalRingLeft、diagonalRingRight、rollerCoaster、tearDrop、tickingClock、flurry、nowSlide、risingEssence随便换 
		minOpacity: 1
	});
});
</script>	
<div style="text-align:center;clear:both">
</div>



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


热门标签: 滚动切换 滑动选项卡切换 flash焦点图 叠加浮动层 选项卡切换 滑动手风琴 层叠叠加 旋转翻转 焦点图 幻灯片 图片轮播 图片叠加 图片切换 旋转木马 图片轮播 选项卡自动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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