jQuery图片轮播特效
生活随笔
收集整理的這篇文章主要介紹了
jQuery图片轮播特效
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
圖圖：
碼碼：
<body><div class="head"><div class="head_inner clearfix"><ul id="nav"></ul></div></div><div id="scroll_area" class="imgfocus"><div id="bigimg_area" class="imgbox"><div class="bigimg"><a href=""><img src="images/1.jpg"/></a></div><div class="bigimg"><a href=""><img src="images/2.jpg"/></a></div><div class="bigimg"><a href=""><img src="images/3.jpg"/></a></div><div class="bigimg"><a href=""><img src="images/4.jpg"/></a></div></div><ul id="tabs" class="num_a2"><li><a href="javascript:void(0)" hidefocus="true" target="_self">楊冪</a></li><li><a href="javascript:void(0)" hidefocus="true" target="_self">范冰冰</a></li><li><a href="javascript:void(0)" hidefocus="true" target="_self">高圓圓</a></li><li><a href="javascript:void(0)" hidefocus="true" target="_self">劉詩詩</a></li></ul></div><div class="foot"></div></body><script type="text/javascript" src="js/koala.min.1.5.js"></script><script type="text/javascript">Qfast.add('widgets', {path: "js/terminator2.2.min.js", type: "js", requires: ['fx']});Qfast(false, 'widgets', function() {K.tabs({id: 'scroll_area', //焦點圖包裹id conId: "bigimg_area", //大圖域包裹id tabId: "tabs", //小圓點數字提示idtabTn: "a",conCn: '.bigimg', //大圖域配置class auto: 1, //自動播放 1或0effect: 'fade', //效果配置eType: 'mouseover', // 鼠標事件pageBt: true, //是否有按鈕切換頁碼bns: ['.prev', '.next'], //前后按鈕配置class interval: 3000// 停頓時間 })})</script>
代碼說明：
首先定義div，其id為scroll_area，css類為imgfocus
再在其中定義div，id為bigimg_area，css類為imgbox
在其中定義div，css類為bigimg；
在其中包含a鏈接，a鏈接中包含img元素，img中包含要輪播的圖片；
定義ul li 列表，css類為num_a2; 各個li項中的文字為對應圖片說明；
引入jquery.js，koala.min.1.5.js
在js中設置焦點圖包裹的div的id為第一個定義的div，即scroll_area;
和大圖域包裹id；
設置自動播放；
設置效果為fade；
設置是否有按鈕切換頁碼；
以及播放的時間間隔等；
.imgfocus{position:relative;width:1000px;height:390px;background:#F1F1F1;margin:40px auto 0 auto;}
在imgfocus類中設置：
寬度1000；高度390；背景色；
相對定位，參照父級的原始點為原始點；
外邊距：上-40，下-0，右、左-自動；
說明：資源為網上下載；本文圖片所示代碼，（兔兔），由鄙人實現；代碼說明為鄙人所寫；
下載：
http://pan.baidu.com/s/1jGGl1Q2
總結
以上是生活随笔為你收集整理的jQuery图片轮播特效的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jQuery时间轴特效
- 下一篇： jquery 幻灯片图像切换效果