jquery自动轮播图，点击按钮切换，点击圆点切换，自动更新圆点颜色

2019独角兽企业重金招聘Python工程师标准>>>

1.引入jquery文件

css部分:

<style>
            .container{
                width: 100%;
                border: 1px solid #008000;
            }
            .content{
                width: 500px;
                height: 300px;
                overflow: hidden;
                position: relative;
                margin: 20px auto;
            }
            #imglist{
                width: 1500px;
                height: 300px;
                position: relative;
            }
            #imglist img{
                width: 500px;
                height: 300px;
                float: left;
            }
            .btn{
                width:500px ;
                height: 20px;
                position: absolute;
                top: 100px;
            }
            .btn span{
                width: 50px;
                height: 50px;
                line-height: 50px;
                border-radius: 50%;
                background-color: #999;
            }
            .btn-pre{
                float: left;
                font-size: 50px;
            }
            .btn-next{
                float: right;
                font-size: 50px;
            }
            ul{
                width: 150px;
                height: 30px;
                margin: 20px auto;
                list-style: none;
            }
            li{
                float: left;
                margin-left: 20px;
                width: 30px;
                height: 30px;
                background-color: red;
            }
            .current{
                background-color: blue;
            }
            .btn{
                display: none;
            }
            .container:hover .btn{
                display: block;
                cursor: pointer;
            }
        </style>

    html部分:

    <div class="container">
            <div class="content">
                <div id="imglist">
                    <img src="img/0.jpg" />
                    <img src="img/1.jpg" />
                    <img src="img/2.jpg" />
                </div>
                <div class="btn">
                    <span class="btn-pre" οnclick="pre()">&lt;</span>
                    <span class="btn-next" οnclick="next();">&gt;</span>
                </div>
            </div>
            <ul class="dot">
                <li class="current" οnclick="changePic(this)" data-i = "0"></li>
                <li οnclick="changePic(this)" data-i='1'></li>
                <li οnclick="changePic(this)" data-i='2'></li>
            </ul>
        </div>

        js部分:

        <script>
            var index=0;
            function pre(){
                if($('#imglist').position().left>=0){
                    index=2;
                    $('#imglist').css({'left':-1000+'px'}),
                    $('li').removeClass('current');
                    $('li').eq(index).addClass('current');
                    
                }else{
                    index--;
                    var newPosition=($('#imglist').position().left+500)+'px';
                    $('#imglist').css({'left':newPosition});
                    $('li').removeClass('current');
                    $('li').eq(index).addClass('current');
                }
                
            }
            function next(){
                if($('#imglist').position().left>-1000){
                    index++;
                    //alert($('#imglist').position().left)
                    var newPosition=($('#imglist').position().left-500)+'px';
                    //console.log(newPosition);
                    $('#imglist').css({'left':newPosition});
                    $('li').removeClass('current');
                    $('li').eq(index).addClass('current');
                }else{
                    index=0;
                    $('#imglist').css({'left':0+'px'});
                    $('li').removeClass('current');
                    $('li').eq(index).addClass('current');
                }    
            }
            function changePic(obj){
                $('li').removeClass('current');
                $(obj).addClass('current');
                var i = $(obj).data('i');
                $('#imglist').css({'left':-500*i+'px'})
                
            }
            //自动轮播
            function autoPlay(){
                timer=setInterval(function(){
                    next();
                },2000)
            }
            autoPlay();
            $('.container').mouseenter(function(){
                clearInterval(timer);
            })
            $('.container').mouseleave(function(){
                autoPlay();
            })
        </script>
       最终效果图:

        

转载于:https://my.oschina.net/kitty0107/blog/2874700