如何制作幻燈片(代碼分享)
話不多數(shù),請(qǐng)看代碼:
一 輪播 定時(shí) <style type="text/css"> #dw_JS_huanDeng_2 { margin: 0 auto; width: 1100px; position: relative; z-index: 5;} #JS_HDmenu_2 { position: absolute; top: 300px; z-index: 4; } ol, ul { list-style: none; } #JS_HDmenu_2 li { float: left; width: 12px; height: 12px; margin: 0 5px; border-radius: 6px; cursor: pointer; background-color: #A79B9B; } #JS_HDmenu_2 li:hover { background-color: red; } #JS_huanDeng_2 { margin: 0px auto 0 auto; position: relative; height: 320px; overflow: hidden;} #JS_huanDeng_2 div, #JS_huanDeng_2 a { display: block; width: 100%; height: 100%; } #JS_huanDeng_2 div { position: absolute; z-index: 4; } </style> <script src="__PUBLIC__/H/js/jquery.min.js"></script> <!-- //幻燈片--> <div class="JS_huanDeng_2_bg" > <div id="dw_JS_huanDeng_2" > <ul id="JS_HDmenu_2" > </ul> </div> <div id="JS_huanDeng_2" style="border:0px solid red;"> <volist name="banner" id="va"> <div> <a href="{$va.content}" style="background:url(__ROOT__/{$va.content}) center top no-repeat #fff;"></a></div> </volist> </div> </div> <!--首頁(yè)幻燈片輪播 【2016-5-27 】 start--> <script type="text/javascript"> for(var i=0;i<$("#JS_huanDeng_2 div").length;i++){ $('#JS_HDmenu_2').append("<li></li>"); } //alert($('#JS_HDmenu_2').width()); var ml=(1100-$('#JS_HDmenu_2').width())/2; //alert(ml); $('#JS_HDmenu_2').css('left',ml+'px'); $('#JS_huanDeng_2 div').eq(0).show().siblings().hide(); var i=0; var timeId = setInterval("autoChange()",3000); $('#JS_HDmenu_2 li').mouseover( function(){ clearInterval(timeId); var I=$(this).index(); $('#JS_huanDeng_2 div').eq(I).fadeIn().siblings().fadeOut(); }) $('#JS_HDmenu_2 li').mouseout(function(){ timeId = setInterval("autoChange()",3000); }); function autoChange(){ i++; if(i>$('#JS_huanDeng_2 div').length){ i=0; } $('#JS_huanDeng_2 div').eq(i).fadeIn().siblings().fadeOut(); } </script> <!--首頁(yè)幻燈片輪播 【2016-5-27 】 end-->
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
- JS實(shí)現(xiàn)的多張圖片輪流播放幻燈片效果
- js實(shí)現(xiàn)3D圖片逐張輪播幻燈片特效代碼分享
- js帶點(diǎn)自動(dòng)圖片輪播幻燈片特效代碼分享
- JS實(shí)現(xiàn)FLASH幻燈片圖片切換效果的方法
- js實(shí)現(xiàn)幻燈片播放圖片示例代碼
- JS實(shí)現(xiàn)淘寶幻燈片效果的實(shí)現(xiàn)方法
- javascript實(shí)現(xiàn)圖片切換的幻燈片效果源代碼
- js 幻燈片的實(shí)現(xiàn)
- 漂亮的js tab圖片輪換效果代碼(可自定義的幻燈片和圖片緩沖切換)
- Angularjs 實(shí)現(xiàn)一個(gè)幻燈片示例代碼
相關(guān)文章
JS實(shí)現(xiàn)的簡(jiǎn)單折疊展開(kāi)動(dòng)畫(huà)效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)的簡(jiǎn)單折疊展開(kāi)動(dòng)畫(huà)效果,可實(shí)現(xiàn)類(lèi)似百度頁(yè)面分享按鈕一樣的折疊展開(kāi)動(dòng)畫(huà)效果,涉及javascript頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-04-04感覺(jué)很流暢的js實(shí)現(xiàn)的鍵盤(pán)控制(帶慣性)
感覺(jué)很流暢的js實(shí)現(xiàn)的鍵盤(pán)控制(帶慣性)...2007-06-06JS使用正則截取兩個(gè)字符串之間的字符串實(shí)現(xiàn)方法詳解
這篇文章主要介紹了JS使用正則截取兩個(gè)字符串之間的字符串實(shí)現(xiàn)方法,結(jié)合實(shí)例形式簡(jiǎn)單分析了JS正則匹配與截取操作的實(shí)現(xiàn)技巧,并拓展分析了數(shù)量詞的概念與功能,需要的朋友可以參考下2017-01-01原生Js實(shí)現(xiàn)元素漸隱/漸現(xiàn)(原理為修改元素的css透明度)
大家經(jīng)??吹骄W(wǎng)頁(yè)里圖片漸變顯示,自己寫(xiě)一個(gè)。原理很簡(jiǎn)單就是修改元素的css透明度,具體實(shí)現(xiàn)代碼如下,感興趣的各位可以參考下哈,希望對(duì)大家有所幫助2013-06-06javascript實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)拖動(dòng)效果實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)拖動(dòng)效果,實(shí)例分析了javascript鼠標(biāo)拖動(dòng)效果的相關(guān)要點(diǎn)與實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04bootstrap實(shí)現(xiàn)動(dòng)態(tài)進(jìn)度條效果
本篇文章主要介紹了bootstrap實(shí)現(xiàn)動(dòng)態(tài)進(jìn)度條效果,進(jìn)度條可以加強(qiáng)應(yīng)用的用戶體驗(yàn)效果,看到數(shù)字,具有一定的參考價(jià)值,有興趣的可以了解一下。2017-03-03