javascript實現(xiàn)圖片自動和可控的輪播切換特效
更新時間:2015年04月13日 10:05:36 投稿:hebedich
這篇文章主要介紹了javascript實現(xiàn)圖片自動和可控的輪播切換特效,效果非常的棒,推薦給大家,有需要的小伙伴可以參考下。
演示圖:

需要引入的文件
復制代碼 代碼如下:
<link rel="stylesheet" type="text/css" > <script type="text/javascript" src="http://hovertree.com/texiao/js/1/js/koala.min.1.5.js"></script>
js代碼:
<script type="text/javascript">
Qfast.add('widgets', { path: "http://hovertree.com/texiao/js/1/js/terminator2.2.min.js", type: "js", requires: ['fx'] });
Qfast(false, 'widgets', function () {
K.tabs({
id: 'decoroll2', //焦點圖包裹id
conId: "decoimg_a2", //大圖域包裹id
tabId: "deconum2", //小圓點數(shù)字提示id
tabTn: "a",
conCn: '.decoimg_b2', //大圖域配置class
auto: 1, //自動播放 1或0
effect: 'fade', //效果配置
eType: 'mouseover', // 鼠標事件
pageBt: true, //是否有按鈕切換頁碼
bns: ['.prev', '.next'], //前后按鈕配置class
interval: 3000// 停頓時間
})
})
</script>
html代碼
<div id="decoroll2" class="imgfocus"> <div id="decoimg_a2" class="imgbox"> <div class="decoimg_b2"> <a href="http://m.fzitv.net"> <img src="/texiao/js/1/img/1.jpg"> </a> </div> <div class="decoimg_b2"> <a href="http://m.fzitv.net"> <img src="/texiao/js/1/img/2.jpg"> </a> </div> <div class="decoimg_b2"> <a href="http://m.fzitv.net"> <img src="/texiao/js/1/img/3.jpg"> </a> </div> <div class="decoimg_b2"> <a href="http://m.fzitv.net"> <img src="/texiao/js/1/img/4.jpg"> </a> </div> </div> <ul id="deconum2" 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>
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
相關(guān)文章
js重寫alert事件(避免alert彈框標題出現(xiàn)網(wǎng)址)
這篇文章主要給大家介紹了關(guān)于js重寫alert事件的相關(guān)資料,這樣可以避免alert彈框標題出現(xiàn)網(wǎng)址的情況,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
echartjs實現(xiàn)cross十星輔助線實現(xiàn)示例詳解
這篇文章主要為大家介紹了echartjs實現(xiàn)cross十星輔助線實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-12-12
原生javascript實現(xiàn)簡單的datagrid數(shù)據(jù)表格
這篇文章主要介紹了原生javascript實現(xiàn)簡單的datagrid數(shù)據(jù)表格的方法,效果十分棒,需要的朋友可以參考下2015-01-01
JavaScript中如何在一個循環(huán)中等待示例代碼詳解
這篇文章主要介紹了在JavaScript中如何在一個循環(huán)中等待(附代碼示例),下面是如何使用for..of 循環(huán)來迭代一個數(shù)組并在循環(huán)內(nèi)等待,需要的朋友可以參考下2022-08-08
Bootstrap打造一個左側(cè)折疊菜單的系統(tǒng)模板(一)
這篇文章主要介紹了Bootstrap打造一個左側(cè)折疊菜單的系統(tǒng)模板(一)的相關(guān)資料,需要的朋友可以參考下2016-05-05

