jQuery轮播图

最新推荐文章于 2022-04-25 21:16:42 发布

zh__quan

最新推荐文章于 2022-04-25 21:16:42 发布

阅读量172

点赞数

本文链接：https://blog.csdn.net/zh__quan/article/details/98239792

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-大屏焦点图-节点操作</title>
    <style>
        * {padding: 0;margin: 0;list-style: none;}
        .box {
            width: 520px;height: 280px;margin: 100px auto;
            border: 1px solid #cccccc;overflow: hidden;
        }
        .box>ul {position: relative;}
        .box>ul>li {position: absolute;left: 0;top: 0;}
        .box>ul>li>img {width: 520px;height: 280px;}
    </style>
</head>
<body>


<div class="box">
    <ul>
        <li><img src="images/01.jpg"></li>
    </ul>
</div>

<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function () {
        /*
          要求:
          点击浏览器左侧, 则, 展示左边一个图片,
          点击浏览器右侧, 展示右边一个图片
          越界循环
        */
        // 1. 准备数据源
        var imageNames = [];
        for(var i=1; i<5; i++){
            imageNames.push('images/0' + i + '.jpg');
        }
        // console.log(imageNames);

        // 2. 设置当前的索引
        var currentShowImgIndex = 0;

        // 3. 监听点击
        $(document).click(function (event) {
            // 3.1 变量
            var middleX = $(window).width() * 0.5;
            var isLeft = false;

            // 3.2 判断
            // console.log(event.pageX);
            if(event.pageX <= middleX){ // 左边
                 currentShowImgIndex = (currentShowImgIndex -1 + imageNames.length) % imageNames.length;
                 isLeft = true;
            }else { // 右边
                currentShowImgIndex = (currentShowImgIndex + 1) % imageNames.length;
                isLeft = false;
            }

            // 3.3 创建节点, 放在ul的最前面
            var imageName = imageNames[currentShowImgIndex];
            var $newTag = $('.box>ul>li').clone();
            $newTag.children('img').attr('src', imageName);
            $('.box>ul').prepend($newTag);

            // 3.4 动画的展示和删除
            if(isLeft){
               $('.box>ul>li:last').animate({
                   left: '-520px'
               }, 200, function () {
                   $(this).remove();
               });
            }else {
                $('.box>ul>li:last').animate({
                    left: '520px'
                }, 200, function () {
                    $(this).remove();
                });
            }
            console.log(currentShowImgIndex);
        });

    });
</script>
</body>
</html>