快捷導(dǎo)航

jQuery平滑旋轉(zhuǎn)幻燈片特效代碼分享

更新時間：2015年09月07日 10:01:52 投稿：lijiao

這篇文章主要介紹了jQuery平滑旋轉(zhuǎn)幻燈片特效，一個具有自己特色的幻燈片會吸引用戶的注意力，讓用戶產(chǎn)生瀏覽網(wǎng)站的興趣至關(guān)重要，現(xiàn)在小編推薦給大家一款特別棒的幻燈片，感興趣的小伙伴可以參考下。

本文實(shí)例講述了jQuery平滑旋轉(zhuǎn)幻燈片特效。分享給大家供大家參考。具體如下：
這一款基于jQuery實(shí)現(xiàn)平滑旋轉(zhuǎn)幻燈片代碼，效果超酷，場面相當(dāng)震撼；圖片大小和顏色自定義請修改jQuery-jcImgScroll.js。
運(yùn)行效果圖： -------------------查看效果下載源碼-------------------

小提示：瀏覽器中如果不能正常運(yùn)行，可以嘗試切換瀏覽模式。
js關(guān)鍵代碼：

<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平滑旋轉(zhuǎn)幻燈片代碼如下

<head>
<title>jQuery平滑旋轉(zhuǎn)幻燈片代碼</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://www.dbjr.com.cn/" target="_blank" path="images/01.jpg" title="腳本之家 www.dbjr.com.cn"></a></li>
    <li><a href="http://www.dbjr.com.cn/" target="_blank" path="images/02.jpg" title="腳本之家 www.dbjr.com.cn"></a></li>
    <li><a href="http://www.dbjr.com.cn/" target="_blank" path="images/03.jpg" title="腳本之家 www.dbjr.com.cn"></a></li>
    <li><a href="http://www.dbjr.com.cn/" target="_blank" path="images/04.jpg" title="腳本之家 www.dbjr.com.cn"></a></li>
    <li><a href="http://www.dbjr.com.cn/" target="_blank" path="images/05.jpg" title="腳本之家 www.dbjr.com.cn"></a></li>
    <li><a href="http://www.dbjr.com.cn/" target="_blank" path="images/06.jpg" title="腳本之家 www.dbjr.com.cn"></a></li>
    <li><a href="http://www.dbjr.com.cn/" target="_blank" path="images/07.jpg" title="腳本之家 www.dbjr.com.cn"></a></li>
   </ul>
 </div>
<!-- 代碼 結(jié)束 -->
<div style="text-align:center">
<p>{download}</p>
<p>{content}</p>
<p>{google_729x90}</p>
</div>
</body>
</html>

以上就是為大家分享的jQuery平滑旋轉(zhuǎn)幻燈片特效代碼，希望大家可以喜歡，并應(yīng)用到實(shí)踐中。

您可能感興趣的文章: