超酷的图片轮换效果

<!DOCTYPE html> 
<html dir="ltr" lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<meta charset="UTF-8"> 
<title>一流素材网-超酷的图片轮换效果jQuery代码</title> 
<link rel="profile" href="http://gmpg.org/xfn/11"> 
<link rel="stylesheet" type="text/css" media="all" href="http://www.16sucai.com/uploadfile/show6/banner007/images/16sucai.css"> 
<script type="text/javascript" src="http://www.16sucai.com/uploadfile/show6/banner007/images/jquery.js"></script> 
<script type="text/javascript" src="http://www.16sucai.com/uploadfile/show6/banner007/images/roundabout.js"></script> 
<script type="text/javascript" src="http://www.16sucai.com/uploadfile/show6/banner007/images/roundshapes.js"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function(){
jQuery('#myRoundabout').roundabout({
shape: 'figure8',
minOpacity: 1,
btnNext: '#bt-next',
 btnPrev: '#bt-previous'
}); 
});
</script> 
</head> 
<body> 
<div class="wrap_it_all"> 
<div class="center"> 
<div class="grad_main"></div> 
<div class="wrapper"> 
<ul id="myRoundabout" class="roundabout-holder" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; position: relative; z-index: 100; "> 
<li id="ch_0" class="roundabout-moveable-item" style="position: absolute; left: 504.3px; top: 68.8px;  opacity: 1; z-index: 296; font-size: 9.51px; " current-scale="0.7927"> 
<a href="http://www.16sucai.com/"><img class="alignnone size-full wp-image-35" title="slide5" src="http://www.16sucai.com/uploadfile/show6/banner007/images/slide5.jpg" alt="" width="433" height="306"></a></li> 
<li id="ch_1" class="roundabout-moveable-item roundabout-in-focus" style="position: absolute; left: 224.1px; top: 35px;  opacity: 1; z-index: 400; font-size: 12px; " current-scale="1.0000"> 
<a href="http://www.16sucai.com/"><img class="alignnone size-full wp-image-33" title="slide4" src="http://www.16sucai.com/uploadfile/show6/banner007/images/slide4.jpg" alt="" width="433" height="306"></a></li> 
<li id="ch_2" class="roundabout-moveable-item" style="position: absolute; left: 33.5px; top: 68.8px; opacity: 1; z-index: 296; font-size: 9.51px; " current-scale="0.7927"> 
<a href="http://www.16sucai.com/"><img class="alignnone size-full wp-image-31" title="slide3" src="http://www.16sucai.com/uploadfile/show6/banner007/images/slide3.jpg" alt="" width="433" height="306"></a></li> 
<li id="ch_3" class="roundabout-moveable-item" style="position: absolute; left: 722.4px; top: 123.5px; opacity: 1; z-index: 129; font-size: 5.49px; " current-scale="0.4573"> 
<a href="http://cms.template-help.com/wordpress_32359/?prod=caroline-drawer-chest"><img class="alignnone size-full wp-image-29" title="slide2" src="http://www.16sucai.com/uploadfile/show6/banner007/images/slide2.jpg" alt="" width="433" height="306"></a></li> 
<li id="ch_4" class="roundabout-moveable-item" style="position: absolute; left: -39.4px; top: 123.5px;  opacity: 1; z-index: 129; font-size: 5.49px; " current-scale="0.4573"> 
<a href="http://www.16sucai.com/"><img class="alignnone size-full wp-image-27" title="slide1" src="http://www.16sucai.com/uploadfile/show6/banner007/images/slide11.jpg" alt="" width="433" height="306"></a></li> 
	<li id="ch_0" class="roundabout-moveable-item" style="position: absolute; left: 504.3px; top: 68.8px;  opacity: 1; z-index: 296; font-size: 9.51px; " current-scale="0.7927"> 
<a href="http://www.16sucai.com/"><img class="alignnone size-full wp-image-35" title="slide5" src="http://www.16sucai.com/uploadfile/show6/banner007/images/slide5.jpg" alt="" width="433" height="306"></a></li> 
<li id="ch_1" class="roundabout-moveable-item roundabout-in-focus" style="position: absolute; left: 224.1px; top: 35px;  opacity: 1; z-index: 400; font-size: 12px; " current-scale="1.0000"> 
<a href="http://www.16sucai.com/"><img class="alignnone size-full wp-image-33" title="slide4" src="http://www.16sucai.com/uploadfile/show6/banner007/images/slide4.jpg" alt="" width="433" height="306"></a></li> 
<li id="ch_2" class="roundabout-moveable-item" style="position: absolute; left: 33.5px; top: 68.8px; opacity: 1; z-index: 296; font-size: 9.51px; " current-scale="0.7927"> 
<a href="http://www.16sucai.com/"><img class="alignnone size-full wp-image-31" title="slide3" src="http://www.16sucai.com/uploadfile/show6/banner007/images/slide3.jpg" alt="" width="433" height="306"></a></li> 
<li id="ch_3" class="roundabout-moveable-item" style="position: absolute; left: 722.4px; top: 123.5px; opacity: 1; z-index: 129; font-size: 5.49px; " current-scale="0.4573"> 
<a href="http://cms.template-help.com/wordpress_32359/?prod=caroline-drawer-chest"><img class="alignnone size-full wp-image-29" title="slide2" src="http://www.16sucai.com/uploadfile/show6/banner007/images/slide2.jpg" alt="" width="433" height="306"></a></li> 
<li id="ch_4" class="roundabout-moveable-item" style="position: absolute; left: -39.4px; top: 123.5px;  opacity: 1; z-index: 129; font-size: 5.49px; " current-scale="0.4573"> 
<a href="http://www.16sucai.com/"><img class="alignnone size-full wp-image-27" title="slide1" src="http://www.16sucai.com/uploadfile/show6/banner007/images/slide11.jpg" alt="" width="433" height="306"></a></li> 
	<li id="ch_0" class="roundabout-moveable-item" style="position: absolute; left: 504.3px; top: 68.8px;  opacity: 1; z-index: 296; font-size: 9.51px; " current-scale="0.7927"> 
<a href="http://www.16sucai.com/"><img class="alignnone size-full wp-image-35" title="slide5" src="http://www.16sucai.com/uploadfile/show6/banner007/images/slide5.jpg" alt="" width="433" height="306"></a></li> 
<li id="ch_1" class="roundabout-moveable-item roundabout-in-focus" style="position: absolute; left: 224.1px; top: 35px;  opacity: 1; z-index: 400; font-size: 12px; " current-scale="1.0000"> 
<a href="http://www.16sucai.com/"><img class="alignnone size-full wp-image-33" title="slide4" src="http://www.16sucai.com/uploadfile/show6/banner007/images/slide4.jpg" alt="" width="433" height="306"></a></li> 
<li id="ch_2" class="roundabout-moveable-item" style="position: absolute; left: 33.5px; top: 68.8px; opacity: 1; z-index: 296; font-size: 9.51px; " current-scale="0.7927"> 
<a href="http://www.16sucai.com/"><img class="alignnone size-full wp-image-31" title="slide3" src="http://www.16sucai.com/uploadfile/show6/banner007/images/slide3.jpg" alt="" width="433" height="306"></a></li> 
<li id="ch_3" class="roundabout-moveable-item" style="position: absolute; left: 722.4px; top: 123.5px; opacity: 1; z-index: 129; font-size: 5.49px; " current-scale="0.4573"> 
<a href="http://cms.template-help.com/wordpress_32359/?prod=caroline-drawer-chest"><img class="alignnone size-full wp-image-29" title="slide2" src="http://www.16sucai.com/uploadfile/show6/banner007/images/slide2.jpg" alt="" width="433" height="306"></a></li> 
<li id="ch_4" class="roundabout-moveable-item" style="position: absolute; left: -39.4px; top: 123.5px;  opacity: 1; z-index: 129; font-size: 5.49px; " current-scale="0.4573"> 
<a href="http://www.16sucai.com/"><img class="alignnone size-full wp-image-27" title="slide1" src="http://www.16sucai.com/uploadfile/show6/banner007/images/slide11.jpg" alt="" width="433" height="306"></a></li> 
</ul> 
<div class="round_conrol"> 
<div id="bt-next"></div> 
<div id="bt-previous"></div> 
</div> 
</div> 
</div> 
</div> 
</body> 
</html>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值