JQuery自动轮播封装

1.HTML部分

 <script src="./jquery.js/jquery-1.8.3.js"></script>
    <div class="con">
        <!-- //图片 -->
        <ul>
            <li class="on"><img src="../img/cont-1.jpg" alt=""></li>
            <li><img src="../img/cont-2.jpg" alt=""></li>
            <li><img src="../img/cont-3.jpg" alt=""></li>
        </ul>
        <!-- 按钮 -->
        <a href='#' class="con1 left">&lt;</a>
        <a href='#' class="con1 right">&gt;</a>
        <!-- 小圆点 -->
        <ol>
            <li class="aution"></li>
            <li></li>
            <li></li>
        </ol>
    </div>

2.css部分

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul,
        li {
            list-style-type: none;
        }
        
        div {
            width: 620px;
            height: 350px;
            position: relative;
            margin: 50px auto;
        }
        
        .con .right {
            right: 0;
        }
        
        ul {
            width: 620px;
            height: 350px;
        }
        
        ul li {
            display: none;
        }
        
        ul li.on {
            display: block;
        }
        
        .con1 {
            position: absolute;
            text-decoration: none;
            font-size: 30px;
            top: 50%;
            color: #fff;
            width: 40px;
            height: 50px;
            background: rgba(0, 0, 0, 0.3);
            text-align: center;
            line-height: 50px;
            margin-top: -25px;
            cursor: pointer;
            display: none;
        }
        
        .con1:hover {
            background: rgba(0, 0, 0, 0.6);
        }
        
        ol {
            position: absolute;
            bottom: 15px;
            left: 50%;
            margin-left: -25px;
        }
        
        ol li {
            width: 10px;
            height: 10px;
            float: left;
            border-radius: 50%;
            border: 1px solid gray;
            margin-right: 10px;
        }
        
        ol li.aution {
            background: white;
            border-color: white;
        }
    </style>

3.jquery部分

<script>
        var index = 0; //添加索引
        var len = $('ul li').length;
        var t = setInterval(move, 2000); //定时器事件

        //鼠标移入事件
        $('.con').mouseenter(function() {
            clearInterval(t);
            $('.con1').css('display', 'block'); //鼠标移入的时候让左右按钮显示
        }).mouseleave(function() { //鼠标离开时间
            t = setInterval(move, 2000);
            $('.con1').css('display', 'none'); //鼠标移出的时候让左右按钮消失
        });



        $('.left').click(move); //点击左按钮
        $('.right').click(moveLeft); //点击右按钮

        //点击小圆点小圆点跟随图片移动
        $('ol li').click(function() {
            $(this).addClass('aution').siblings().removeClass('aution');
            index = $(this).index();
            $('ul li').eq(index).addClass('on').siblings().removeClass('on');
        })

        function move() {
            index++;
            if (index == len) index = 0;
            $('ul li').eq(index).attr('class', 'on').siblings().removeAttr('class'); //左按钮点击图片跟随移动
            $('ol li').eq(index).addClass('aution').siblings().removeClass('aution'); //左点击的时候小圆点跟随左按钮移动

        }

        function moveLeft() {
            index--;
            if (index == -1) index = len - 1;
            $('ul li').eq(index).attr('class', 'on').siblings().removeAttr('class'); //右按钮移动时间
            $('ol li').eq(index).addClass('aution').siblings().removeClass('aution'); //右点击的时候小圆点跟随右按钮移动

        }

4.效果图