javascript實(shí)現(xiàn)圖片自動(dòng)和可控的輪播切換特效
演示圖:
需要引入的文件
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, //是否有按鈕切換頁碼 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.dbjr.com.cn"> <img src="/texiao/js/1/img/1.jpg"> </a> </div> <div class="decoimg_b2"> <a href="http://www.dbjr.com.cn"> <img src="/texiao/js/1/img/2.jpg"> </a> </div> <div class="decoimg_b2"> <a href="http://www.dbjr.com.cn"> <img src="/texiao/js/1/img/3.jpg"> </a> </div> <div class="decoimg_b2"> <a href="http://www.dbjr.com.cn"> <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)容了,希望大家能夠喜歡。
- js實(shí)現(xiàn)支持手機(jī)滑動(dòng)切換的輪播圖片效果實(shí)例
- js圖片輪播手動(dòng)切換效果
- vue.js+elementUI實(shí)現(xiàn)點(diǎn)擊左右箭頭切換頭像功能(類似輪播圖效果)
- 原生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對(duì)象添加getter與setter的5種方法
這篇文章主要介紹了淺談 JS 對(duì)象添加 getter與 setter 的5種方法以及如何讓對(duì)象屬性不可配置或枚舉,需要的朋友可以參考下2018-06-06javascript實(shí)現(xiàn)發(fā)送短信倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)發(fā)送短信倒計(jì)時(shí),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09JavaScript 通過模式匹配實(shí)現(xiàn)重載
昨天rank同學(xué)向我提出一個(gè)問題,在實(shí)際應(yīng)用中有些接口需要提供類似于函數(shù)重載的功能,以方便開發(fā)者組織代碼邏輯,簡(jiǎn)化使用者調(diào)用。2010-08-08小程序?qū)崿F(xiàn)人臉識(shí)別的項(xiàng)目實(shí)踐
人臉識(shí)別在現(xiàn)在很多地方都可以用的到,例如支付,解鎖等,本文就來介紹一下小程序?qū)崿F(xiàn)人臉識(shí)別,具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10javascript full screen 全屏顯示頁面元素的方法
要想讓頁面的某個(gè)元素全屏顯示,就像在網(wǎng)頁上看視頻的時(shí)候,可以全屏觀看一樣,該怎么實(shí)現(xiàn)呢2013-09-09三步實(shí)現(xiàn)ionic3點(diǎn)擊退出app程序
這篇文章主要為大家詳細(xì)介紹了三步實(shí)現(xiàn)ionic3點(diǎn)擊退出app程序,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09詳解關(guān)于html,css,js三者的加載順序問題
這篇文章主要介紹了關(guān)于html,css,js三者的加載順序問題,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04JS實(shí)現(xiàn)頁面跳轉(zhuǎn)與刷新的方法匯總
這篇文章主要給大家介紹了關(guān)于JS實(shí)現(xiàn)頁面跳轉(zhuǎn)與刷新的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08