请老师给个思路

老师给个点击左侧箭头，切换到上一个商品；点击右侧箭头，切换到下一个商品。当切换到最后一个商品时，再点击下一个商品不能进行切换。当切换到第一个商品时，再点击上一个，也不能进行切换。思路

<span>时尚卫生间墙面颜色

2029装饰设计</span>

</a>

</li>

<span>现代北欧风格厨房装

2029饰效果图</span>

</a>

</li>

<div>

</div>

<span>现代时尚北欧风格卧

2029室装饰画</span>

</a>

</li>

<span>130平简约现代北欧

2029风格装修</span>

</a>

</li>

<span>现代北欧风格小客厅2029装修设计</span>

</a>

</li>

</ul>

</div>

</section>

CSS区

/* 商品区 */

.commodity .center-wrap{

width: 1155px;

margin: 0 auto;

overflow: hidden;

position: relative;

}

.commodity ul{

margin-top: 38px;

list-style: none;

}

.commodity ul li.box{

float: left;

width: 171px;

height: 234px;

margin-right: 50px;

}

.commodity ul li.box:first-child{

margin-left: 50px;

}

.commodity ul li.box img{

width: 100%;

vertical-align: top;

margin-bottom: 10px;

}

.commodity .center-wrap .left-btn{

position: absolute;

left: 0;

top: 50%;

margin-top: -24px;

width: 48px;

height: 48px;

background: url(../images/prev.png);

}

.commodity .center-wrap .left-btn:hover {

background: url(../images/prev_active.png);

width: 48px;

height: 48px;

}

.commodity .center-wrap .right-btn{

position: absolute;

right: 0;

top: 50%;

margin-top: -24px;

width: 48px;

height: 48px;

background: url(../images/next.png);

}

.commodity .center-wrap .right-btn:hover {

background-image: url(../images/next_active.png);

width: 48px;

height: 48px;

}

.commodity ul li.box span{

display: block;

width: 162px;

height: 48px;

font-size: 18px;

color: #838383;

line-height: 22px;

}

JS区

(function(){

var leftbtn=document.getElementById('leftbtn');

var rightbtn=document.getElementById('rightbtn');

var list=document.getElementById('list');

var line=list.getElementsByTagName('li');

})();

一只少年 2021-12-18

源自：“仿穷游”首页动态项目 3-2 项目作业

收起

2回答

好帮手慕慕子 2021-12-19 10:30:40

同学你好，对于你的问题解答如下：

1、[0]表示索引，因为getElementsByClassName方法获取的元素以类数组的形式返回，所以需要添加索引获取到里面的元素。

2、这里用不到data-n属性值，i是重新定义的，默认值为0，表示显示第一张图片，点击右按钮时，i值加一，点击左按钮时i值减一，通过i值计算list的left属性值，控制显示的图片

3、len - 5 可以理解为是长度0-4这5个

4、-是表示负号的意思。

因为默认开始显示第一张图片，可以理解为此时的left属性值0，当你点击右按钮，left属性值为负值，list盒子才会向左移动。当你点击左按钮，此时的left属性值本来就是负数，在此基础上，i值减少，让list盒子向右移动一定的距离。同学可以结合代码实现的效果，点击左右按钮，打开控制台，查看list的left属性值变化，帮助自己更好的理解。

祝学习愉快~

收起回答

好帮手慕星星 2021-12-18 16:35:16

同学你好，建议修改布局如下：

1、将左右按钮定位到内容区域外侧

2、加一个轮播盒子，设置与内容宽度一样，将ul宽度设置很大，多增加几个li列表项。ul设置定位，点击左右按钮改变ul定位的left值

参考：

记得li多加几项，方便测试

所有代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>慕云游商城 - 机票、酒店、旅游攻略</title>
    <meta name="Keywords" content="机票，酒店，旅游攻略，签证，出国，自由行">
    <meta name="Description" content="慕云游商城有10多年旅游行业经验，为您提供全方位旅游服务">
    <!-- <link rel="stylesheet" href="css/reset.css"> -->
    <link rel="stylesheet" href="css/base.css">
    <!-- <link rel="stylesheet" href="css/1.css"> -->
    <style>
    /* 商品区 */

    .commodity .center-wrap {
        width: 1155px;
        margin: 0 auto;
        /*overflow: hidden;*/
        position: relative;
    }

    .commodity ul {

        margin-top: 38px;

        list-style: none;

    }

    .commodity ul li.box {

        float: left;

        width: 171px;

        height: 234px;

        margin-right: 50px;

    }

    .commodity ul li.box:first-child {

        margin-left: 50px;

    }

    .commodity ul li.box img {

        width: 100%;

        vertical-align: top;

        margin-bottom: 10px;

    }

    .commodity .center-wrap .left-btn {
        position: absolute;
        /*left: 0;*/
        left: -48px;
        top: 50%;
        margin-top: -24px;
        width: 48px;
        height: 48px;
        background: url(./images/prev.png);
    }

    .commodity .center-wrap .left-btn:hover {
        background: url(./images/prev_active.png);
        width: 48px;
        height: 48px;
    }

    .commodity .center-wrap .right-btn {
        position: absolute;
        /*right: 0;*/
        right: -48px;
        top: 50%;
        margin-top: -24px;
        width: 48px;
        height: 48px;
        background: url(./images/next.png);
    }

    .commodity .center-wrap .right-btn:hover {

        background-image: url(./images/next_active.png);

        width: 48px;

        height: 48px;


    }

    .commodity .sliderlist {
        width: 100%;
        overflow: hidden;
    }

    .commodity ul {
        width: 3000px;
        position: relative;
        left: 0;
        top: 0;
        transition: all 0.5s;
    }

    .commodity ul li.box span {
        display: block;
        width: 162px;
        height: 48px;
        font-size: 18px;
        color: #838383;
        line-height: 22px;
    }
    </style>
</head>

<body>
    <section class="commodity " id="commodity">
        <div class="center-wrap">
            <div class="left-btn"> <a href="javascript:;" id="left-btn"> </a></div>
            <div class="right-btn"> <a href="javascript:;" id="left-btn"></a></div>
            <div class="sliderlist">
                <ul id="list">
                    <li class="box" data-n='0'>
                        <a href="">
                            <div><img src="images/product01.png" alt=""></div>
                            <span>时尚卫生间墙面颜色
                                2029装饰设计</span>
                        </a>
                    </li>
                    <li class="box" data-n='1'>
                        <a href="">
                            <div> <img src="images/product02.png" alt=""></div>
                            <span>现代北欧风格厨房装
                                2029饰效果图</span>
                        </a>
                    </li>
                    <li class="box" data-n='2'>
                        <a href="">
                            <div>
                                <img src="images/product03.png" alt="">
                            </div>
                            <span>现代时尚北欧风格卧
                                2029室装饰画</span>
                        </a>
                    </li>
                    <li class="box" data-n='3'>
                        <a href="">
                            <div><img src="images/product04.png" alt=""></div>
                            <span>130平简约现代北欧
                                2029风格装修</span>
                        </a>
                    </li>
                    <li class="box" data-n='4'>
                        <a href="">
                            <div><img src="images/product05.png" alt=""></div>
                            <span>现代北欧风格小客厅2029装修设计</span>
                        </a>
                    </li>
                    <li class="box" data-n='1'>
                        <a href="">
                            <div> <img src="images/product02.png" alt=""></div>
                            <span>现代北欧风格厨房装
                                2029饰效果图</span>
                        </a>
                    </li>
                    <li class="box" data-n='2'>
                        <a href="">
                            <div>
                                <img src="images/product03.png" alt="">
                            </div>
                            <span>现代时尚北欧风格卧
                                2029室装饰画</span>
                        </a>
                    </li>
                    <li class="box" data-n='3'>
                        <a href="">
                            <div><img src="images/product04.png" alt=""></div>
                            <span>130平简约现代北欧
                                2029风格装修</span>
                        </a>
                    </li>
                    <li class="box" data-n='4'>
                        <a href="">
                            <div><img src="images/product05.png" alt=""></div>
                            <span>现代北欧风格小客厅2029装修设计</span>
                        </a>
                    </li>
                    <li class="box" data-n='3'>
                        <a href="">
                            <div><img src="images/product04.png" alt=""></div>
                            <span>130平简约现代北欧
                                2029风格装修</span>
                        </a>
                    </li>
                    <li class="box" data-n='4'>
                        <a href="">
                            <div><img src="images/product05.png" alt=""></div>
                            <span>现代北欧风格小客厅2029装修设计</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </section>
    <script>
    (function() {

        // var leftbtn = document.getElementById('leftbtn');
        var leftbtn = document.getElementsByClassName('left-btn')[0];

        // var rightbtn = document.getElementById('rightbtn');
        var rightbtn = document.getElementsByClassName('right-btn')[0];

        var list = document.getElementById('list');

        var line = list.getElementsByTagName('li');
        var i = 0;
        var len = line.length;
        leftbtn.addEventListener('click', function() {

            if (i == 0) {
                return;
            }
            i--;
            list.style.left = -i * 221 + 'px';
        })

        rightbtn.addEventListener('click', function() {
            if (i == len - 5) {
                return;
            }


            i++;
            list.style.left = -i * 221 + 'px';
        })

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

</html>

祝学习愉快！

收起回答

提问者一只少年 #1

请老师解释一下var leftbtn = document.getElementsByClassName('left-btn')[0];为什么后面加一个[0]是啥意思？，还有中的左右按钮点击事件中这个各项的具体意思不太能理解，i不是指data-n的索引值嘛？右按钮点击事件中，len-5是指长度0-4这5个的意思嘛？还有最后一个问题是为什么list.style.left左右按钮都是-i*221+'px' 为什么i 前面都有一个-号，是负的意思嘛？

2021-12-19 10:00:58