jquery改造轮播图1

g改造轮播图1：https://www.cnblogs.com/huanghuali/p/8677338.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <!-- <script type="text/javascript" src="js/lunbo.js"></script> -->
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }

    body {
        font-size: 14px;
        line-height: 1.5;
        font-family: 'Microsoft Yahei', 'arial', 'tahoma', 'simsun';
        color: #666;
        background-color: #fff
    }

    img {
        border: 0;
    }

    a {
        text-decoration: none;
        color: #666;
    }

    .wrapper_lb {
        position: relative;
        width: 640px;
        height: 480px;
    }

    .lb_pic_list a {
        position: absolute;  display: block;
    }

    .lb_pic_list a img {
        width: 640px;
        height: 480px;
        display: block;
    }

    .arrow_left {
        position: absolute;
        top: 50%;
        margin-top: -18px;
        left: 10px;
        background: red;
        width: 80px; height: 30px;
        color: #fff;
    }

    .arrow_right {
        position: absolute;
        top: 50%;
        margin-top: -18px;
        right: 10px;
        background: red;
         width: 80px; height: 30px;
        color: #fff;
    }
    .scoll_dot{ overflow: hidden; text-align: center; position: absolute; bottom:0; z-index: 9; }
    .scoll_dot i{ width: 16px; height: 6px; background: blue; margin:0 3px; display: inline-block; cursor: pointer;}
    .scoll_dot .active{ background-color: red }
    </style>
</head>

<body>
    <div class="wrapper_lb">
        <div class="lb_pic_list" id="scrollWrap">
            <a href="javascript:;" class="J_pic"><img src="https://img.d1xz.net/d/2018/12/5c10a30eb359a.jpg" alt="1"></a>
            <a href="javascript:;" class="J_pic"><img src="https://img.d1xz.net/d/2018/12/5c10a2bd253bd.jpg" alt="2"></a>
            <a href="javascript:;" class="J_pic"><img src="https://img.d1xz.net/d/2018/12/5c10a321a708b.jpg" alt="3"></a>
        </div>
        <div class="scoll_dot J_bannerPage"></div>
        <div class="arrow_left J_arrow">向左</div>
        <div class="arrow_right J_arrow">向右</div>
    </div>
    <script type="text/javascript">
    $(function() {
        var index = 0;
        var timer;
        //获取id为scrollWrap 所有的img
        var imgList = $('#scrollWrap .J_pic');
        //img的个数
        var imgNum = imgList.length;
        if(imgNum>1){
        //第一张图显示
        $('.J_pic').eq(0).show().siblings().hide();
        

        $('.J_pic').mouseover(function(){
            clearInterval(timer);  //鼠标经过停止自动播放
        });
        $('.J_pic').mouseout(function(){
            showTime(); //鼠标离开继续自动播放
        });
        //点击向左按钮
        $('.arrow_left').click(function() {
            clearInterval(timer);
            if (index == 0) {
                index = imgNum;
            }

            index--;
            showBg();
            showTime();
        });


        //点击向右按钮
        $('.arrow_right').click(function() {
            clearInterval(timer);
            if (index == imgNum - 1) {
                index = -1;
            }

            index++;
            showBg();
            showTime();
        });
        // 填充分页
        var bPage=$(".wrapper_lb").find('.J_bannerPage');
        var html='';
        for(var i=0,max=imgNum;i<max;i++){
            html+=(i==0)?'<i class="active"></i>':'<i></i>';
        }
        bPage.append(html);
        // //鼠标点击分页
        bPage.children('i').on('click',function(){

            index=$(this).index();
            showBg();
        })

        function showBg() {
            $('.J_pic').eq(index).fadeIn(300).siblings().fadeOut(300);
            bPage.children('i').eq(index).addClass('active').siblings().removeClass('active');
        }
         
        function showTime() {
            timer = setInterval(function() {
                index++;
                // if (index == imgNum) {
                //     index = 0;
                // }
                index=(index==imgNum)?0:index;
                showBg();
            }, 2000);
        }
        //自动播放图片
        showTime();
    }
    });
    </script>
</body>

</html>

 

posted @ 2018-12-25 09:21  前端HL  阅读(174)  评论(0)  编辑  收藏  举报