Jquery自制轮播图效果

每日鸡汤： 遥不可及的并非是十年之后，而是今天之前。触手可及的就是明天，愿一觉醒来，又是全新的自己。

主体代码

    <div class="banner">
        <!--图片主体-->
        <div class="b_main">
            <div class="b_m_pic">
                <ul>
                    <li>
                        <a><img src="img/1.png" width="100%" height="100%"/></a>
                    </li>
                    <li>
                        <a><img src="img/2.png" width="100%" height="100%"/></a>
                    </li>
                </ul>
            </div>
        </div>
        <!--小圆点-->
        <div class="b_list">
            <ul>
                <li class="l_click"></li>
                <li></li>
            </ul>
        </div>
        <!--切换按钮-->
        <div class="b_btn">
            <div class="b_left">&lt</div>
            <div class="b_right">&gt</div>
        </div>
    </div>

样式代码

    .banner{
        position:relative;
        width:1366px;
        height:780px;
        margin:100px auto;
        border:10px solid #009999;
        border-radius:15px
    }
    .banner .b_main{
        position:relative;
        width:1366px;
        height:780px;
    }
    .banner .b_main .b_m_pic{
        position:relative;
        width:1366px;
        height:780px;
    }
    /*这里给绝对定位，是为了把li叠在一起*/
    .b_main .b_m_pic li{
        position:absolute;
        width:1366px;
        height:780px;
        top:0;
        left:0;
    }
    /*小圆点的样式*/
    .b_list ul{
        /*这里的ul根据banner定位*/
        position:absolute;
        right:40px;
        bottom:30px;
    }
    .b_list ul li{
        width:20px;
        height:20px;
        float:left;
        background:#333;
        margin-left:20px;
        border-radius:50px;
        border:2px solid white;
    }
    .b_list ul .l_hover,.b_list ul .l_click{
        border:2px solid #333;
        background:white
    }
    /*两边耳朵的样式*/
    .b_btn div{
        position:absolute;
        width: 100px;
        height: 100px;
        background: rgba(0,0,0,0.7);
        font-size: 60px;
        color: white;
        text-align:center;
        line-height: 100px;
        top:50%;
        margin-top: -80px;
        cursor: pointer;
    }
    /*移到左边*/
    .b_btn .b_left{left:0;border-radius: 50%}
    /*移到右边*/
    .b_btn .b_right{right:0;border-radius: 50%}

jQuery代码

    <script type="text/javascript">
        //获取.b_list里面的所有li，放到$li这个变量里面
        var $li = $(".b_list ul li");
        var len = $li.length-1;
        var _index = 0;
        var $img = $(".b_main .b_m_pic li"); 
        var $btn = $(".b_btn div");
        
        //定时器
        var timer = null; 
        $li.hover(function(){
            //指向li添加样式
            $(this).addClass("l_hover");
        },function(){
            //指向li删除样式
            $(this).removeClass("l_hover");
        });
        
        //点击事件
        $li.click(function(){
            _index = $(this).index();
            play();
        });
        
        //封装函数
        function play(){
            //获取li的下标，改变样式
            $li.eq(_index).addClass("l_click").siblings().removeClass("l_click");
            //获取图片的下标，实现淡入淡出
            $img.eq(_index).fadeIn().siblings().fadeOut();
        }
        
        //两边耳朵的点击事件
        $btn.click(function(){
            var index = $(this).index();
            if(index) {
                _index++;
                if (_index > len) {_index = 0;}
                play();
            }else {
                _index--;
                if(_index < 0){_index = len;}
                play();
            }
        });
        
        //定时轮播
        function auto(){
            //把定时器放进timer这个对象里面
            timer = setInterval(function(){
                _index++;
                if(_index > len){
                    _index = 0;
                }
                play();
            },2000);
        }auto();
        
        //当我移上d_main的时候停止轮播
        $(".b_main").hover(function(){
            clearInterval(timer);
        },function(){
            auto();
        });
        
        //当我移上两边耳朵的时候停止轮播
        $(".b_btn div").hover(function(){
            clearInterval(timer);
        },function(){
            auto();
        });
    </script>