JQuery图片轮播实例

HTML+CSS代码：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>图片轮播</title>

<style>

    *{ margin:0; padding:0;}

    ul{ list-style:none;}

    .clear{ clear:both;}

    #box{

        width:500px;

        height:320px;

        margin:100px auto;

        border:#999 5px solid;

        position:relative;

        overflow:hidden;

    }

    .m_unit{

        width:10000px;

        height:320px;

        position:absolute;

        left:0px;

        top:0px;

    }

    .m_unit ul{overflow:hidden; list-style:none;}

    .m_unit ul li{float:left;}

    .btn{}

    .btn .btn_icon{ width:60px; height:60px; overflow:inherit; background:url(images/btn.png) no-repeat;}

    .btn #b_left{ position:absolute;top:50%;left:0;}

    .btn #b_right{ position:absolute;top:50%;right:0; background-position:-60px 0;}

    .dot{position:absolute; bottom:5px; right:10px;}

    .dot ul li{ width:20px; height:20px; float:left; margin-right:2px; background:#000; opacity:0.3;}

    .dot ul .initial{ background:#F00;opacity:0.8;}

</style>

</head>

<body>

    <div id="box">

        <div class="m_unit">

            <ul>

                <li><a href="#"><img src="data:images/a1.png"/></a></li>

                <li><a href="#"><img src="data:images/a2.png"/></a></li>

                <li><a href="#"><img src="data:images/a3.png"/></a></li>

                <li><a href="#"><img src="data:images/a4.png"/></a></li>

            </ul>

            <div class="clear"></div>

        </div>

        <div class="btn">

            <div id="b_left" class="btn_icon"></div>

            <div id="b_right" class="btn_icon"></div>

        </div>

        <div class="dot">

            <ul>

                <li class="initial"></li>

                <li></li>

                <li></li>

                <li></li>

            </ul>

        </div>

    </div>

</body>

</html>

JAVAScript+JQuery代码：

    <!--导入JQuery-->

    <script src="js/jquery-1.12.4.min.js"></script>

    <script>

        //获取图片长度

        var imgLength = $('.m_unit ul li').length;

        //拼接假0

        $('.m_unit ul').append($('.m_unit ul li').eq(0).clone());

        //信号量

        var idx =0;

        //自动轮播

        var timer = setInterval(rightBtn,2000);

        //鼠标进入box

        $('#box').mouseenter(function(){

            clearInterval(timer);

        });

        //鼠标离开box

        $('#box').mouseleave(function(){

            timer = setInterval(rightBtn,2000);

        });

        //右按钮的点击事件

        $('#b_right').click(rightBtn);

        function rightBtn(){

            idx++;

            $('.m_unit').animate({'left':-500 * idx},1000,function(){

                if(idx > imgLength-1){

                    idx = 0;

                    $(this).css('left','0px');

                }

            });

            dotChange();

        }

        //左按钮的点击事件

        $('#b_left').click(function(){

            idx--;

            if(idx < 0){

                idx =imgLength-1;

                $('.m_unit').css('left',-500 * imgLength);

            }

            $('.m_unit').animate({'left':-500 * idx},1000);

            dotChange();

        });

        //设置小圆点击事件

        $('.dot ul li').each(function(i) {

            $(this).click(function(){

                idx =i;

                $('.m_unit').animate({'left':-500 * idx},1000);

                dotChange();

            });

        });

        //设置小红点跟随轮播

        function dotChange(){

            var idxx=idx;

            if(idxx > imgLength-1) idxx=0;

            $('.dot ul li').eq(idxx).css({'background':'#F00','opacity':0.8}).siblings().css({'background':'#000','opacity':0.3});

        }

    </script>

巴特西

JQuery图片轮播实例

最新文章

热门文章