幻灯片制作

一 轮播 定时

<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-->

 

转载于:https://www.cnblogs.com/jingzi111/p/6247662.html