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 幻灯片图像切换效果