jquery简单实现轮播图 

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

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .banner {
            width: 500px;
            height: 300px;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }

        .banner .img {
            left: 0;
            top: 0;
            position: absolute;
            z-index: 1;
        }

        .banner .img li {
            float: left;
        }

        .banner .img img {
            width: 500px;
            height: 300px;
        }

        .banner .num {
            width: 100%;
            height: 30px;
            bottom: 30px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            position: absolute;
            z-index: 2;
        }

        .banner .num li {
            width: 16px;
            height: 16px;
            margin-left: 16px;
            border-radius: 50%;
            background-color: aquamarine;
        }

        .banner .num li.on {
            background-color: red;
        }

        .banner div {
            width: 20px;
            height: 40px;
            background-color: aquamarine;
            color: red;
            text-align: center;
            font-size: 20px;
            line-height: 40px;
            position: absolute;
            z-index: 2;
        }

        .banner .btn_l {
            top: 50%;
            left: 10px;
            transform: translate(0, -50%);
        }

        .banner .btn_r {
            top: 50%;
            right: 10px;
            transform: translate(0, -50%);
        }
    </style>
</head>

<body>
    <noscript>
        <h1>这样页面需要浏览器启用JavaScript</h1>
    </noscript>
    <div class="banner">
        <ul class="img">
            <li><img src="./slider-swiper/images/1.jpg" alt=""></li>
            <li><img src="./slider-swiper/images/2.jpg" alt=""></li>
            <li><img src="./slider-swiper/images/3.jpg" alt=""></li>
        </ul>
        <ul class="num"></ul>
        <div class="btn_l">&lt;</div>
        <div class="btn_r">&gt;</div>
    </div>
</body>
<script type="text/javascript" src="./static/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var width = 500;
        var iNow = 1;/* 0 1 2 ... count count+1 */
        var count = $('.banner .img li').size();
        var last = $('.banner .img li').last().clone();
        var first = $('.banner .img li').first().clone();
        $('.banner .img').prepend(last).append(first);
        $('.banner .img').css({ width: width * (count + 2) + 'px', left: -width + 'px' });

        var num_li = '';
        for (var i = 0; i < count; i++) {
            // num_li += `<li id=${i}></li>`;
            num_li = num_li + '<li id=' + i + '></li>';
        }
        $('.banner .num').append(num_li);
        $('.banner .num li').first().addClass('on');

        $('.banner .num').on('click', function (event) {
            myStopPropagation(event);
            console.log('.banner .num click');
            event = event || window.event;
            var target = event.target || event.srcElement;
            if (target.nodeName.toLowerCase() == 'li') {
                clearInterval(timer);
                $('.banner .img').stop().animate({ left: -width * (parseInt(target.id) + 1) }, { duration: 500 });
                $('.banner .num li').removeClass('on').eq(target.id).addClass('on');
            }
        });

        /* 注意：
        1.mouseenter，mouseleave的效果等同于hover
        2.ie上是鼠标移入移出，而谷歌上是移入后按下鼠标左键才会触发
        3.鼠标在 .banner 下子各个元素之间切换移动也会触发 mouseover，mouseout，而不会触发 mouseenter，mouseleave。
        4.ie不支持es6语法，而谷歌支持
        5.ie低版本比如ie7并不支持一部分css，比如display：flex；border-radius：50%；等等，但是ie10可以；
        6.老版本flex布局 -webkit-box 了解一下，听说兼容性好 https://blog.csdn.net/qq_42625428/article/details/83755402
        */
        $('.banner').hover(function (eventObject) {
            console.log('.banner hoverIN');
            clearInterval(timer);
        }, function (eventObject) {
            console.log('.banner hoverOUT');
            clearInterval(timer);
            timer = setInterval(move, 2600);
        });

        
        /* $('.banner').on('click',function(event){
            console.log('.banner click');
        }).on('mouseenter',function(event){
            console.log('.banner mouseenter');
            clearInterval(timer);
        }).on('mouseleave',function(){
            console.log('.banner mouseleave');
            clearInterval(timer);
            timer = setInterval(move, 2600);
        }); */

        /* $('.banner').on('click',function(event){
            console.log('.banner click');
        }).on('mouseover',function(event){
            console.log('.banner mouseover');
            // clearInterval(timer);
        }).on('mouseout',function(){
            console.log('.banner mouseout');
            // clearInterval(timer);
            // timer = setInterval(move, 2600);
        }); */

        $('.banner .btn_r').on('click', function (event) {
            myStopPropagation(event);
            console.log('.banner .btn_r click');
            clearInterval(timer);
            move('flag');
        });
        $('.banner .btn_l').on('click', function (event) {
            myStopPropagation(event);
            console.log('.banner .btn_l click');
            clearInterval(timer);
            move();
        });
        function myStopPropagation(event) {
            event = event || window.event  //event事件的兼容性写法
            if (event.stopPropagation) { //能进来一定是支持该方法
                event.stopPropagation(); //在主流浏览器中阻止
            } else {
                event.cancelBnbble = true//true为阻止冒泡
            }
        }
        function move(flag) {
            arguments.length ? iNow-- : iNow++;
            if (iNow > count) {
                iNow = 1;
                $('.banner .img').css('left', -width * 0);//定位到第一张图count
            }
            if (iNow < 1) {
                iNow = count;
                $('.banner .img').css('left', -width * (iNow + 1));//定位到最后一张图1
            }
            $('.banner .img').stop().animate({ left: -width * iNow }, { duration: 500 });
            $('.banner .num li').eq(iNow - 1).addClass('on').siblings().removeClass('on');
        }
        var timer = setInterval(move, 2600);

    })
</script>

</html>

 

posted @ 2019-05-16 10:32  我将枕中记忆抹去任岁月浮光掠影  阅读(189)  评论(0)  编辑  收藏  举报