如何制作幻灯片(代码分享)

时间:2021-05-18

话不多数,请看代码:

一 轮播 定时<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-->

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章