在一定的标签位置上添加循环不同的内容

最新推荐文章于 2024-06-04 23:11:16 发布

wsy157

最新推荐文章于 2024-06-04 23:11:16 发布

阅读量134

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/wsy157/article/details/118566024

版权

在一定的标签位置上添加循环不同的内容

在5个位置上循环32条数据

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
    <style>
        ul{
            height: 100px;
            margin-left: 50px;
        }
    li{
        list-style: none;
        width: 50px;
        height: 100px;
        background-color: burlywood;
        margin: 20px;
        float: left;
    }
    button{
        position: absolute;
        top: 65px;
    }
    </style>
</head>

<body>
    <div>
        <button onclick="last()">上一页</button>
        <ul class="ul">
            <li class="li"></li>
            <li class="li"></li>
            <li class="li"></li>
            <li class="li"></li>
            <li class="li"></li>
            <li class="li"></li>
            <!-- <li class="li"></li>
            <li class="li"></li>
            <li class="li"></li>
            <li class="li"></li>
            <li class="li"></li>
            <li class="li"></li>
            <li class="li"></li>
            <li class="li"></li>
            <li class="li"></li>
            <li class="li"></li> -->
        </ul>
        <button onclick="next()">下一页</button>
    </div>
    <script>
        var list=[
            {"id":1},
            {"id":2},
            {"id":3},
            {"id":4},
            // {"id":5},
            // {"id":6},
            // {"id":7},
            // {"id":8},
            // {"id":9},
        ]
        var li=document.getElementsByClassName("li");
        var index=0;
        var startIndex=0;
        show();
        function show() {
            for (let i = 0; i < li.length; i++) {
                if (index==list.length) {
                    index=0;
                }
                li[i].innerHTML=list[index].id;
                index++;
            }
        }
        function next(){
            startIndex=index;
            show();
        }
        function last(){
            index=startIndex;
            if(list.length>li.length){
                if(index<li.length){
                    index=list.length+index-li.length;
                }else{
                    index=index-li.length;
                }
            }else{
                var quyu=li.length%list.length;
                if(quyu>index){
                    index=list.length+index-quyu;
                }else{
                    index=index-quyu;
                }
            }
            startIndex=index;
            show();
        }
    </script>
</body>

</html>

其中数组的数据可以添加或减少，ul里的li也可以添加或减少

wsy157

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在一定的标签位置上添加循环不同的内容

这里写自定义目录标题在一定的标签位置上添加循环不同的内容在一定的标签位置上添加循环不同的内容在5个位置上循环32条数据<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport"
复制链接

扫一扫