jquery轮播小案例

1. css部分：

   <style>
   * {
    margin: 0;
    padding: 0;
   }
   
    li {
      list-style: none;
   }
   
   .slide {
    position: relative;
    width: 500px;
    height: 360px;
    margin: 50px auto;
    overflow: hidden;
    border: 1px dashed gray;
    border-radius: 50%;
   }
   .slide img {
    position: absolute;
    display: none;
   }
   
   .slide .slide_pag {
    bottom: 20px;
    left: 200px;
    position: absolute;
   }
   
   .slide .slide_pag ul li {
    float: left;
    color: #fff;
    background-color: #999;
    width: 15px;
    height: 15px;
    text-align: center;
    line-height: 15px;
    margin: 0 4px;
    font-style: normal;
    font-family: SimHei;
    cursor: pointer;
    border-radius: 50px;
   }
    .slide .left_btn {
    position: absolute;
    top: 140px;
    left: 0;
    cursor: pointer;
    color: white;
    font-size: 40px;
    }
   .slide .right_btn {
    position: absolute;
    top: 140px;
    right: 0;
    cursor: pointer;
    color: white;
    font-size: 40px;
     }
   </style>
   

2. html部分

   <div class="container">
        <div class="slide">
        <a href="#"><img src=" alt=""></a>
        <a href="#"><img src="""></a>
        <a href="#"><img src="""></a>
        <a href="#"><img src="""></a>
        <a href="#"><img src="""></a>
        <div class="slide_pag">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
        <div class="left_btn">《</div>
        <div class="right_btn">》</div>
    </div>
   

3.引用jquery

<script src="../jquery/jquery.js"></script>

4. js部分

    <script>
    $(function () {
        //转成DOM对象
        var left_move = $('.left_btn')[0];
        var right_move = $('.right_btn')[0];
   
        //遍历添加索引值
        var lis = $('ul li');
        for (var i = 0; i < lis.length; i++) {
            lis[i].index = i;
        }
   
        //第一张图片设可见
        $('.slide img').eq(0).css({
            display: "block"
        });
        $('.slide_pag ul li').eq(0).css({
            backgroundColor: "skyblue"
        });
   
        //点击小圆点事件函数
        $('.slide_pag ul li').click(function () {
            var index = this.index;
            $(this).css({
                backgroundColor: 'skyblue'
            }).siblings().css({
                backgroundColor: '#999'
            });
            $('.slide img').stop().fadeOut(500);
            $('.slide img').eq(index).stop().fadeIn(600);
        });
   
        var keyIndex = 0;
        var slide_img = $('.slide img');
        // 左滑动事件函数
        function moveLeft() {
            keyIndex--;
            if (keyIndex < 0) {
                keyIndex = slide_img.length - 1;
            }
            $('.slide img').stop().fadeOut(500);
            $('.slide img').eq(keyIndex).stop().fadeIn(600);
            $('.slide_pag ul li').eq(keyIndex).css({
                backgroundColor: 'skyblue'
            }).siblings().css({
                backgroundColor: '#999'
            });
        };
   
        // 绑定左滑动事件函数
        left_move.onclick = moveLeft;
        // 右滑动事件函数
        function moveRight() {
            keyIndex++;
            if (keyIndex > slide_img.length - 1) {
                keyIndex = 0;
            }
            $('.slide img').stop().fadeOut(500);
            $('.slide img').eq(keyIndex).stop().fadeIn(600);
            $('.slide_pag ul li').eq(keyIndex).css({
                backgroundColor: 'skyblue'
            }).siblings().css({
                backgroundColor: '#999'
            });
        };
   
        // 绑定右左滑动事件函数
        right_move.onclick = moveRight;
        // 定时器实现定时轮播
        var timer = setInterval(moveRight, 3000);
        // 鼠标停留在轮播上面停止滑动，移开恢复滑动
        $('.slide').hover(function () {
            clearInterval(timer);
        }, function () {
            timer = setInterval(moveRight, 3000);
        })
    })
   </script>