GreensnoWorld
记录点滴,分享乐趣,一块凝固的时间
Jquery幻灯片
JavaScript  2015年4月14日

根据上次编写的简单图片切换扩展而成了一个完整的Jquery幻灯片,还是很简陋,不过该有的功能都有了,在 IE11 和 Firefox 上测试没问题。发布出来供有需要的同学使用,如发现问题请及时反馈。

HTML:

<div class="box">
    <div class="picture">
        <span class="cur pf"><img src="img_1.jpg"/></span>
        <span><img src="img_2.jpg" /></span>
        <span><img src="img_3.jpg" /></span>
        <span><img src="img_4.jpg" /></span>
    </div>
    <div class="button">
        <div class="bt bf"></div>
        <div class="bt"></div>
        <div class="bt"></div>
        <div class="bt"></div>
    </div>
</div>

CSS:

.box{
    width: 980px;
    height: 475px;
}
.picture{
    float: left;
    position: absolute;
}
.picture span{
    display: none;
    float: left;
    position: absolute;
}
.picture .pf{
    display: block;
}
.button{
    float: left;
    position: absolute;
    margin: 390px 0 0 434px;
}
.button .bf{
    opacity: 0.8;
}
.bt{
    width: 16px;
    height: 16px;
    float: left;
    border-radius: 8px;
    background: #000000;
    cursor: pointer;
    margin: 0 6px;
    opacity: 0.3;
}

JS:

$(document).ready(function(){
    var f = setInterval(great, 8000);
    function great(){
        var i = $('.cur').next().index();
        if(i < 0){
            $('.button div').css({'opacity':'0.3'});
            $('.button div').first().css({'opacity':'0.8'});
            $('.picture').find('.cur').removeClass('cur').fadeOut(900);
            $('.picture span').first().addClass('cur').fadeIn(900);
        }else{
            $('.button').children('div').css({'opacity':'0.3'});
            $('.button').children('div').eq(i).css({'opacity':'0.8'});
            $('.picture').find('.cur').fadeOut().next().fadeIn(900);
            $('.picture').find('.cur').removeClass('cur').next(900).addClass('cur');
        }
    }
    $('.bt').click(function(){
        var i = $(this).index();
        $(this).css({'opacity':'0.8'}).siblings().css({'opacity':'0.3'});
        $('.picture').children('span').removeClass('cur').fadeOut(900);
        $('.picture').children('span').eq(i).addClass('cur').fadeIn(900);
        
        clearInterval(f);
        f = setInterval(great, 8000);
    });
});
LIJG
余本顽劣,生于紫云下,长于汝水滨。早年求学,兴趣广泛,好高骛远,学无所成,仓皇入世。兴趣所致,投身互联网,求知未证,而立已至,始悟光阴荏苒,终需务实钻研。故有此站,记录时光,积累点滴,验证所学,分享愚见。指舞方寸间,心系万千年。
留言