本文實例講述了jQuery平滑旋轉幻燈片特效。分享給大家供大家參考。具體如下：
這一款基于jQuery實現平滑旋轉幻燈片代碼，效果超酷，場面相當震撼；圖片大小和顏色自定義請修改jQuery-jcImgScroll.js。
運行效果圖： -------------------查看效果 下載源碼-------------------
小提示：瀏覽器中如果不能正常運行，可以嘗試切換瀏覽模式。
js關鍵代碼：
<script src="js/jQuery-1.7.1.js" language="javascript" type="text/javascript"></script><script src="js/jQuery-easing.js" language="javascript" type="text/javascript"></script><script src="js/jQuery-jcImgScroll.js" language="javascript" type="text/javascript"></script><script language="javascript" type="text/javascript"><!-- $(function(){ $("#demo1").jcImgScroll({ }); $("#demo2").jcImgScroll({ count : 7 }); $("#demo3").jcImgScroll({ arrow : { width:110, height:342, x:220, y:0 }, count : 3, offsetX : 140, NumBtn : true, title:false });});--></script>為大家分享的jQuery平滑旋轉幻燈片代碼如下
<head><title>jQuery平滑旋轉幻燈片代碼</title><style><!-- /* jQuery jcImgScroll css */.jcImgScroll { position:relative; height:342px; }.jcImgScroll li { border:1px solid #ccc; }.jcImgScroll li a { background:#fff; display:block; height:340px; }.jcImgScroll li.loading a { background:#fff url(img/loading.gif) no-repeat center center;} .jcImgScroll li img,.jcImgScroll li,.jcImgScroll em,.jcImgScroll dl { display:none; border:0 none;}.jcImgScroll em.sPrev { background:url(images/arrow-left.png) no-repeat left center; }.jcImgScroll em.sNext { background:url(images/arrow-right.png) no-repeat right center;}.jcImgScroll dl dd { background:url(images/NumBtn.png) no-repeat 0 bottom; text-indent:-9em; }.jcImgScroll dl dd:hover,.jcImgScroll dl dd.curr { background-position:0 0; }--></style><script src="js/jQuery-1.7.1.js" language="javascript" type="text/javascript"></script><script src="js/jQuery-easing.js" language="javascript" type="text/javascript"></script><script src="js/jQuery-jcImgScroll.js" language="javascript" type="text/javascript"></script><script language="javascript" type="text/javascript"><!-- $(function(){ $("#demo1").jcImgScroll({ }); $("#demo2").jcImgScroll({ count : 7 }); $("#demo3").jcImgScroll({ arrow : { width:110, height:342, x:220, y:0 }, count : 3, offsetX : 140, NumBtn : true, title:false });});--></script></head><body><!-- 代碼 開始 --><div id="demo1" class="jcImgScroll"> <ul> <li><a href="http://m.survivalescaperooms.com/" target="_blank" path="images/01.jpg" title="武林網 m.survivalescaperooms.com"></a></li> <li><a href="http://m.survivalescaperooms.com/" target="_blank" path="images/02.jpg" title="武林網 m.survivalescaperooms.com"></a></li> <li><a href="http://m.survivalescaperooms.com/" target="_blank" path="images/03.jpg" title="武林網 m.survivalescaperooms.com"></a></li> <li><a href="http://m.survivalescaperooms.com/" target="_blank" path="images/04.jpg" title="武林網 m.survivalescaperooms.com"></a></li> <li><a href="http://m.survivalescaperooms.com/" target="_blank" path="images/05.jpg" title="武林網 m.survivalescaperooms.com"></a></li> <li><a href="http://m.survivalescaperooms.com/" target="_blank" path="images/06.jpg" title="武林網 m.survivalescaperooms.com"></a></li> <li><a href="http://m.survivalescaperooms.com/" target="_blank" path="images/07.jpg" title="武林網 m.survivalescaperooms.com"></a></li> </ul> </div><!-- 代碼 結束 --><div style="text-align:center"><p>{download}</p><p>{content}</p><p>{google_729x90}</p></div></body></html>以上就是為大家分享的jQuery平滑旋轉幻燈片特效代碼，希望大家可以喜歡，并應用到實踐中。
新聞熱點
疑難解答
