如何制作幻燈片(代碼分享)
更新時(shí)間:2017年01月06日 16:34:57 作者:鏡子-正衣冠-知得失
本文主要分享了制作幻燈片的實(shí)例代碼,具有一定的參考價(jià)值,下面跟著小編一起來看下吧
話不多數(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>
<!--首頁幻燈片輪播 【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>
<!--首頁幻燈片輪播 【2016-5-27 】 end-->
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(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)文章
一文詳解如何用原型鏈的方式實(shí)現(xiàn)JS繼承
JavaScript中,每當(dāng)創(chuàng)建一個(gè)對(duì)象,都會(huì)給這個(gè)對(duì)象提供一個(gè)內(nèi)置對(duì)象 [[Prototype]] 。這個(gè)對(duì)象就是原型對(duì)象,[[Prototype]] 的層層嵌套就形成了原型鏈。本文將詳細(xì)講解如何用原型鏈的方式實(shí)現(xiàn)一個(gè) JS 繼承,感興趣的可以了解下2022-04-04
js 實(shí)現(xiàn)無干擾陰影效果 簡(jiǎn)單好用(附文件下載)
js實(shí)現(xiàn)無干擾陰影效果,簡(jiǎn)單好用,需要的朋友可以參考下。2009-12-12
vue-router路由懶加載的實(shí)現(xiàn)(解決vue項(xiàng)目首次加載慢)
這篇文章主要介紹了vue-router路由懶加載的實(shí)現(xiàn)(解決vue項(xiàng)目首次加載慢),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
原生JS實(shí)現(xiàn)的雪花飄落動(dòng)畫效果
這篇文章主要介紹了原生JS實(shí)現(xiàn)的雪花飄落動(dòng)畫效果,涉及javascript數(shù)值運(yùn)算及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-05-05
基于JavaScript實(shí)現(xiàn)五子棋游戲
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)五子棋游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
2017-11-11
javascript setTimeout()傳遞函數(shù)參數(shù)(包括傳遞對(duì)象參數(shù))
由于需要,我要用到setTimeout()并且在里邊的函數(shù)參數(shù)傳遞一個(gè)參數(shù),就像這樣setTimeout("fun(參數(shù))", 1000)。但是以我這種寫法,js會(huì)報(bào)錯(cuò),說‘參數(shù)’未定義。
2010-04-04 
