轮播图1 

<!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="http://apps.bdimg.com/libs/jquery/1.9.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;
    }

    .arrow_right {
        position: absolute;
        top: 50%;
        margin-top: -18px;
        right: 10px;
    }
    </style>
</head>

<body>
    <div class="wrapper_lb">
        <div class="lb_pic_list" id="scrollWrap">
            <a href="javascript:;" class="J_pic"><img src="images/01.jpg" alt="1"></a>
            <a href="javascript:;" class="J_pic"><img src="images/02.jpg" alt="2"></a>
            <a href="javascript:;" class="J_pic"><img src="images/03.jpg" alt="3"></a>
            <a href="javascript:;" class="J_pic"><img src="images/04.jpg" alt="4"></a>
            <a href="javascript:;" class="J_pic"><img src="images/05.jpg" alt="5"></a>
        </div>
        <div class="arrow_left J_arrow">
            <img src="images/arrowl.png" style="width: 20px;height: 35px;cursor: pointer;">
        </div>
        <div class="arrow_right J_arrow">
            <img src="images/arrowr.png" style="width: 20px;height: 35px; cursor: pointer;">
        </div>
    </div>
    <script type="text/javascript">
    $(function() {
        var i = 0;
        var timer;
        //获取id为scrollWrap 所有的img
        var imgList = $('#scrollWrap a img');
        //img的个数
        var imgNum = imgList.length;
        //第一张图显示
        $('.J_pic').eq(0).show().siblings().hide();
        //自动播放图片
        showTime();

        $('.J_pic').mouseover(function(){
            clearInterval(timer);  //鼠标经过停止自动播放
        });
        $('.J_pic').mouseout(function(){
            showTime(); //鼠标离开继续自动播放
        });


        //点击向左按钮
        $('.arrow_left').click(function() {
            clearInterval(timer);
            if (i == 0) {
                i = imgNum;
            }

            i--;
            showBg();
            showTime();
        });


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

            i++;
            showBg();
            showTime();
        });

        function showBg() {
            $('.J_pic').eq(i).fadeIn(300).siblings().fadeOut(300);
        }
        function showTime() {
            timer = setInterval(function() {
                i++;
                if (i == imgNum) {
                    i = 0;
                }
                showBg();
            }, 2000);
        }
    });
    </script>
</body>

</html>

 

posted @ 2018-03-30 17:04  前端HL  阅读(171)  评论(0)    收藏  举报