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

需要引入的文件
復(fù)制代碼 代碼如下:
<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', //焦點(diǎn)圖包裹id
conId: "decoimg_a2", //大圖域包裹id
tabId: "deconum2", //小圓點(diǎn)數(shù)字提示id
tabTn: "a",
conCn: '.decoimg_b2', //大圖域配置class
auto: 1, //自動(dòng)播放 1或0
effect: 'fade', //效果配置
eType: 'mouseover', // 鼠標(biāo)事件
pageBt: true, //是否有按鈕切換頁(yè)碼
bns: ['.prev', '.next'], //前后按鈕配置class
interval: 3000// 停頓時(shí)間
})
})
</script>
html代碼
<div id="decoroll2" class="imgfocus"> <div id="decoimg_a2" class="imgbox"> <div class="decoimg_b2"> <a href="http://www.dhdzp.com"> <img src="/texiao/js/1/img/1.jpg"> </a> </div> <div class="decoimg_b2"> <a href="http://www.dhdzp.com"> <img src="/texiao/js/1/img/2.jpg"> </a> </div> <div class="decoimg_b2"> <a href="http://www.dhdzp.com"> <img src="/texiao/js/1/img/3.jpg"> </a> </div> <div class="decoimg_b2"> <a href="http://www.dhdzp.com"> <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">劉詩(shī)詩(shī)</a></li> </ul> </div>
以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。
您可能感興趣的文章:
- js實(shí)現(xiàn)支持手機(jī)滑動(dòng)切換的輪播圖片效果實(shí)例
- js圖片輪播手動(dòng)切換效果
- vue.js+elementUI實(shí)現(xiàn)點(diǎn)擊左右箭頭切換頭像功能(類(lèi)似輪播圖效果)
- 原生js實(shí)現(xiàn)圖片層疊輪播切換效果
- Bootstrap 最常用的JS插件系列總結(jié)(圖片輪播、標(biāo)簽切換等)
- js實(shí)現(xiàn)圖片輪播切換效果
- js實(shí)現(xiàn)點(diǎn)擊切換和自動(dòng)播放的輪播圖
- js實(shí)現(xiàn)輪播圖自動(dòng)切換
- JS實(shí)現(xiàn)多重選項(xiàng)卡切換輪播圖
- 原生javascript實(shí)現(xiàn)圖片輪播切換效果
相關(guān)文章
js重寫(xiě)alert事件(避免alert彈框標(biāo)題出現(xiàn)網(wǎng)址)
這篇文章主要給大家介紹了關(guān)于js重寫(xiě)alert事件的相關(guān)資料,這樣可以避免alert彈框標(biāo)題出現(xiàn)網(wǎng)址的情況,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
echartjs實(shí)現(xiàn)cross十星輔助線實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了echartjs實(shí)現(xiàn)cross十星輔助線實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12
原生javascript實(shí)現(xiàn)簡(jiǎn)單的datagrid數(shù)據(jù)表格
這篇文章主要介紹了原生javascript實(shí)現(xiàn)簡(jiǎn)單的datagrid數(shù)據(jù)表格的方法,效果十分棒,需要的朋友可以參考下2015-01-01
JavaScript中如何在一個(gè)循環(huán)中等待示例代碼詳解
這篇文章主要介紹了在JavaScript中如何在一個(gè)循環(huán)中等待(附代碼示例),下面是如何使用for..of 循環(huán)來(lái)迭代一個(gè)數(shù)組并在循環(huán)內(nèi)等待,需要的朋友可以參考下2022-08-08
Bootstrap打造一個(gè)左側(cè)折疊菜單的系統(tǒng)模板(一)
這篇文章主要介紹了Bootstrap打造一個(gè)左側(cè)折疊菜單的系統(tǒng)模板(一)的相關(guān)資料,需要的朋友可以參考下2016-05-05
JavaScript實(shí)現(xiàn)隨機(jī)替換圖片的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)隨機(jī)替換圖片的方法,涉及javascript中Math.random方法的靈活運(yùn)用,需要的朋友可以參考下2015-04-04

