轮播图怎么做，搜狗输入法轮播图怎么做

最新推荐文章于 2024-07-11 17:14:12 发布

歪桑

最新推荐文章于 2024-07-11 17:14:12 发布

阅读量42

点赞数

文章标签： html5 css javascript

本文链接：https://blog.csdn.net/weixin_55692687/article/details/125937450

版权

<!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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box {
            width: 300px;
            height: 100px;
            position: relative;
            margin: 100px auto;
            overflow: hidden; 
            /* 超出本分隐藏，留下第一次看到的内容 */
            border: 1px solid #ccc;
        }
        .itembox{
            /* 使用定位，不然无法改变元素的left */
            position: absolute;
            display: flex;
            transition: left 3s;
        }
        .item{
            width: 130px;
            height: 100px;
            margin-right: 20px;
        }
    </style>
</head>

<body>
    <!-- 排版布局
        首先是窗口，窗口必须是固定高度和宽度的（窗口既是看的见的部分）
        其次是容器，容器就是包裹图片的外边容器，我们的轮播效果就是通过改变容器的左边距离（left）来实现的
        ！！！ 必须在html标签上加style="left:0;"因为在原生js中无法写在style标签里面的宽度高度等一切跟距离有关的数据
        所以必须加载标签上，
    -->
    <div class="box">
        <div class="itembox" style="left: 0;">
            <div class="item" style="background-color: red;">1</div>
            <div class="item" style="background-color: blue;">2</div>
            <div class="item" style="background-color: gold;">3</div>
            <div class="item" style="background-color: green;">4</div>
        </div>
    </div>
    <button class="back"> 上 </button>
    <button class="next"> 下 </button>
    <script>
        var num = 0; // 用来计算点击的次数
        // 上一页的内容
        var back = document.querySelector('.back')
        // 标准规范的添加click事件
        back.addEventListener('click',()=>{
            // 每次进来把计算点击次数的num--
            num--;
            // 进行判断，如果超出返回值就不能再次点击（所以要return），也可以把设置按钮的disabled=ftrue来达到禁止点击
            if(num==-1){
                num=0;
                alert("不可以再点击了");
                return;
            }
            // 获取容器的left 
            var itembox = document.querySelector('.itembox');
            // 把容器的left重新赋值   这里拥到parseInt的原因是因为,拿到的left是带有单位的(px)
            // 而parseInt能把单位去掉，只取出数字部分
            // 想一想 新的left值是不是= 旧的left + 每一个内容的宽度（如果每个内容都有margin-left,margin-right值的情况下记得加上）
            // 所以 itembox.style.left = parseInt(itembox.style.left) + 150 + 'px';
            // }       新的left        =  旧的left 去掉px + 每个内容宽度（130）+ 每个内容margin值（20）+单位     
            itembox.style.left = parseInt(itembox.style.left) + 150 + 'px'; 
        })
        // 下一页的内容
        var next = document.querySelector('.next')
        next.addEventListener('click',()=>{
            // 每次进来把计算点击次数的num++
            num++;
            if(num>2){
                num=2;
                alert("不可以再点击了");
                return;
            }
            var itembox = document.querySelector('.itembox');
            itembox.style.left = parseInt(itembox.style.left) - 150 + 'px'; 
        })
    </script>
</body>

</html>