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">劉詩(shī)詩(shī)</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', //焦點(diǎn)圖包裹id conId: "bigimg_area", //大圖域包裹id tabId: "tabs", //小圓點(diǎn)數(shù)字提示idtabTn: "a",conCn: '.bigimg', //大圖域配置class auto: 1, //自動(dòng)播放 1或0effect: 'fade', //效果配置eType: 'mouseover', // 鼠標(biāo)事件pageBt: true, //是否有按鈕切換頁(yè)碼bns: ['.prev', '.next'], //前后按鈕配置class interval: 3000// 停頓時(shí)間 })})</script>
代碼說(shuō)明：
首先定義div，其id為scroll_area，css類為imgfocus
再在其中定義div，id為bigimg_area，css類為imgbox
在其中定義div，css類為bigimg；
在其中包含a鏈接，a鏈接中包含img元素，img中包含要輪播的圖片；
定義ul li 列表，css類為num_a2; 各個(gè)li項(xiàng)中的文字為對(duì)應(yīng)圖片說(shuō)明；
引入jquery.js，koala.min.1.5.js
在js中設(shè)置焦點(diǎn)圖包裹的div的id為第一個(gè)定義的div，即scroll_area;
和大圖域包裹id；
設(shè)置自動(dòng)播放；
設(shè)置效果為fade；
設(shè)置是否有按鈕切換頁(yè)碼；
以及播放的時(shí)間間隔等；
.imgfocus{position:relative;width:1000px;height:390px;background:#F1F1F1;margin:40px auto 0 auto;}
在imgfocus類中設(shè)置：
寬度1000；高度390；背景色；
相對(duì)定位，參照父級(jí)的原始點(diǎn)為原始點(diǎn)；
外邊距：上-40，下-0，右、左-自動(dòng)；
說(shuō)明：資源為網(wǎng)上下載；本文圖片所示代碼，（兔兔），由鄙人實(shí)現(xiàn)；代碼說(shuō)明為鄙人所寫；
下載：
http://pan.baidu.com/s/1jGGl1Q2
總結(jié)
以上是生活随笔為你收集整理的jQuery图片轮播特效的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： jQuery时间轴特效
- 下一篇： jquery 幻灯片图像切换效果