<!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>
超酷的图片轮换效果
最新推荐文章于 2024-09-18 09:47:26 发布