各位同學(xué)大家好，我是學(xué)做網(wǎng)站論壇的建站會(huì)員廣東崔磊。很感謝論壇老師在我學(xué)習(xí)網(wǎng)站制作課程期間，對(duì)我的輔導(dǎo)幫助。

現(xiàn)在在這里我想給同學(xué)做分享一個(gè)網(wǎng)頁幻燈片輪播代碼，可以使用到任何一個(gè)網(wǎng)站上，只要把代碼里的圖片和文字改成自己的就可以了。

下面是用這個(gè)網(wǎng)頁幻燈片輪播代碼制作的網(wǎng)頁幻燈片效果圖：

以下是網(wǎng)頁圖片輪播幻燈片代碼

HTML代碼：

<div class="banner">

        <img class="change pre"  src="images/pre.png" >

        <img class="change next" src="images/next.png" >



        <div class="cirbox" >

            <div class="cir cr"></div>

            <div class="cir"></div>

            <div class="cir"></div>

            <div class="cir"></div>

        </div>

        <div class="imgbox">

            <img class="img im" src="images/banner-01.png">

            <img class="img" src="images/banner-02.png">

            <img class="img" src="images/banner-03.png">

            <img class="img" src="images/banner-04.png">

        </div>  

    </div>



    <div>



    </div>

CSS代碼：

.banner {

    width: 100%;

    height: 500px;

    background-color: aqua;

    position: relative;

    overflow: hidden;

    cursor: pointer;

}

.imgbox {

    width: 100%;

    height: 500px;

    position: relative;

    background-color: #222222;

    overflow: hidden;

}

.img {

    position: absolute;

    display: none;

    left: 50%;

    margin-left: -683px;

}

.im {

    display: block;

}

.change {

    height: 100px;

    display: block;

    position: absolute;

    z-index: 20;

    opacity: 0.4;

    transition: 0.4s;

    top: 50%;

    margin-top: -50px

}

.change:hover {

    opacity: 1;

}

.pre {

    left: 1%;

}

.next {

    right: 1%;

}

.cirbox {

    width: 88px;

    position: absolute;

    bottom: 15px;

    z-index: 10;

    left: 50%;

    margin-left: -44px;

    cursor: pointer;

}

.cir {

    width: 12px;

    height: 12px;

    background-color: white;

    opacity: 0.4;

    float: left;

    border-radius: 6px;

    margin: 0 5px 0 5px;

    cursor: pointer;

}

.cir:hover {

    background-color: cyan;

    transition: 0.8s;

}

.cr {

    opacity: 1;

}

.cr:hover {

    background-color: white;

}

JQERY代碼：

document.write("<script src='http://libs.baidu.com/jquery/1.10.2/jquery.min.js'><\/script>");

$(document).ready(function(){

    var t;

    var index=-1;

    var times=3000;//切換速度

    t=setInterval(play,times);



    function play(){

        index++;

        if(index>3){index=0}

        $('.img').eq(index).fadeIn(1000).siblings().fadeOut(1000)

        $('.cir').eq(index).addClass('cr').siblings().removeClass('cr')

    }



    $('.cir').click(function(){

        $(this).addClass('cr').siblings().removeClass('cr')

        var index=$(this).index()

        $('.img').eq(index).fadeIn(600).siblings().fadeOut(600)

    })



    $('.pre').click(function(){

        index--

        if(index<0){index=3}

        $('.img').eq(index).fadeIn(1000).siblings().fadeOut(1000)

        $('.cir').eq(index).addClass('cr').siblings().removeClass('cr')

    })

    $('.next').click(function(){

        index++

        if(index>3){index=0}

        $('.img').eq(index).fadeIn(1000).siblings().fadeOut(1000)

        $('.cir').eq(index).addClass('cr').siblings().removeClass('cr')

    })



    $('.banner').hover(

        function(){

            clearInterval(t)

        },

        function(){

            t=setInterval(play,times)

            function play(){

                index++

                if(index>3){index=0}

                $('.img').eq(index).fadeIn(1000).siblings().fadeOut(1000)

                $('.cir').eq(index).addClass('cr').siblings().removeClass('cr')

            }

        }

    );



});

標(biāo)簽： isp 代碼 建站 網(wǎng)站制作

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。