【求思路】移动端滑动，中间图片变大

图片n张，可视区显示三张，滑动后中间图片始终比左右两边大，这样的效果该怎么实现??
滑动监听怎么监听滑动一下过一张图片？？
————————————点击实现（375x667）——————————————————————

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #wrap {
            width: 100%;
            height: 100%;
            padding: 0 17px;
            box-sizing: border-box;
        }

        ul {
            list-style: none;
        }

        .show-box {
            width: 100%;
            margin-top: 25%;
            overflow: hidden;
        }

        .show-box ul {
            width: 784px;
            overflow: hidden;
            display: flex;
            align-items: center;
        }

        .show-box ul li {
            display: block;
            float: left;
            width: 95px;
            height: 140px;
            margin-right: 15px;
            border-radius: 10px;
            border: 1px solid;
        }

        .show-box ul li:last-of-type {
            margin-right: 0;
        }

        .show-box ul li img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
        }

        .show-box ul li.big {
            width: 110px;
            height: 160px;
        }

        .control-btn,
        .control-btn ul {
            width: 100%;
            overflow: hidden;
        }

        .control-btn {
            margin-top: 30px;
        }

        .control-btn ul {
            display: flex;
            justify-content: center;
        }

        .control-btn ul li {
            width: 40px;
            height: 25px;
            line-height: 25px;
            float: left;
            text-align: center;
            font-size: 20px;
        }

        .control-btn ul li.noclick {
            color: gainsboro;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <div class="show-box">
            <ul>
                <li>1</li>
                <li class="big">2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
            </ul>
        </div>
        <div class="control-btn">
            <ul>
                <li class="left noclick">《</li>
                <li class="right">》</li>
            </ul>
        </div>
    </div>
    <script src="./zepto.min.js"></script>
    <script>
        // big li 宽度不加外边距
        let li_big_width = 112;
        // li 宽度+15margin-right
        let li_width = 97 + 15;
        // img_count：图片总数，  show_img：可视区数量， ul_width ：ul长度， img_count: 要显示的图片总数
        let count = 0,
            show_img = 3,
            img_count = $('.show-box ul li').length,
            ul_width = (img_count - 1) * li_width + li_big_width;
        // 设置ul宽度
        $('.show-box ul').css('width', ul_width + 'px');
        // 左击
        $('.left').on('click', function () {
            count--;
            $('.right').removeClass('noclick');
            // console.log('左击' + count)
            if (count < 0) {
                $(this).addClass('noclick');
                count = ++count;
            } else {
                $('right').removeClass('noclick');
                let margin_left_tmp = parseInt($('.show-box ul').css('margin-left'));
                console.log(margin_left_tmp);
                $('.show-box ul').css('margin-left', margin_left_tmp + li_width + 'px');
                $('.big').removeClass('big').prev().addClass('big');
            }
        });
        // 右击
        $('.right').on('click', function () {
            ++count;
            console.log('右击' + count);
            $('.left').removeClass('noclick');
            if (count > (img_count - show_img)) {
                $(this).addClass('noclick');
                count = --count;
            } else {
                $('.show-box ul').css('margin-left', '-' + count * li_width + 'px');
                $('.big').removeClass('big').next().addClass('big');
            }
        })
    </script>
</body>

</html>

阅读 3.3k

【求思路】移动端滑动，中间图片变大

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？