网页图片轮播幻灯片代码分享

各位同学大家好，我是学做网站论坛的建站会员广东崔磊。很感谢论坛老师在我学习网站制作课程期间，对我的辅导帮助。

现在在这里我想给同学做分享一个网页幻灯片轮播代码，可以使用到任何一个网站上，只要把代码里的图片和文字改成自己的就可以了。

下面是用这个网页幻灯片轮播代码制作的网页幻灯片效果图：

以下是网页图片轮播幻灯片代码

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

            }

        }

    );



});

标签： isp 代码 建站 网站制作

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。