javascript操纵标签属性

img

    1、给 id 为  prev 的标签添加点击事件 last。
    2、给 id 为  next 的标签添加点击事件 next。
    3、点击 prev 标签时 修改 id 为 list 的标签的 left 属性的值，使得 left 属性值等于 -550 px 和 0 px 之间切换；（实现轮播效果）
    4、点击 next 标签时 修改 id 为 list 的标签的 left 属性的值，使得 left 属性值等于 -550 px 和 0 px 之间切换；（实现轮播效果）
    注：使用 parseInt(list.style.left) 方法获取 id 为 list 的标签的 left 属性的整数值；


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #container {
        width: 550px;
        height: 400px;
        margin: 50px auto;
        overflow: hidden;
        position: relative;
    }

    #list {
        width: 1100px;
        height: 300px;
        position: relative;
        transition: all .3s;
    }

    img {
        width: 550px;
        height: 300px;
        float: left;
    }

    .arrow {
        display: inline-block;
        width: 100px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        margin-top: 20px;
        background: plum;
        cursor: pointer;
    }

    #next {
        float: right;
    }
</style>
<body>
    <div id="container">
        <div id="list" style="left: 0px">
            <img src="./1.jpg" alt="">
            <img src="./2.jpg" alt="">
        </div>
        <span id="prev" class="arrow" onclick="last()">《</span>
        <span id="next" class="arrow" onclick="next()">》</span>
    </div>
    <script>
        var list = document.getElementById('list');       
        var num = parseInt(list.style.left);
        //上一个
        function last() {
            if (num == 0) {
                alert('已经是第一张了')
                return;
            }
            num += 550;
            list.style.left = num + 'px';
        }
        // 下一个
        function next() {
            if (num == -550) {
                alert('已经是最后一张了')
                return;
            }
            num -= 550;
            list.style.left = num + 'px';
        }
    </script>
</body>
</html>

你题目的解答代码如下：

<!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,chrome=1" />
    <title> 页面名称 </title>
<style type="text/css">
    #container {
        position: relative;
        width: 550px;
        height: 400px;
        overflow: hidden;
    }
    #list {
        position: absolute;
        top: 0;
        width: 1100px;
        height: 400px;
        transition: left 500ms;
    }
 
    #list img {
        width: 550px;
        height: 400px;
        float: left;
    }
 
    #prev {
        position: absolute;
        top: 180px;
        left: 0;
        display: block;
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background-color: #999;
    }
    #next {
        position: absolute;
        top: 180px;
        right: 0;
        display: block;
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background-color: #999;
        float: right;
    }
</style>
<body>
    <div id="container">
        <div id="list" style="left: 0px">
            <img src="1.jpg" alt="">
            <img src="2.jpg" alt="">
        </div>
        <span id="prev" class="arrow" onclick="last()">《</span>
        <span id="next" class="arrow" onclick="next()">》</span>
    </div>
    <script>
        var list = document.getElementById('list');
        //上一个
        function last() {
            var num = parseInt(list.style.left);
            if (num >= 0)
                return;
            list.style.left = num + 550 + 'px';
        }
        // 下一个
        function next() {
            var num = parseInt(list.style.left);
            if (num <= -550)
                return;
            list.style.left = num - 550 + 'px';
        }
    </script>
</body>
</html>

如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!

img