类似轮播循环的工位--js_工位显示js-CSDN博客

这段代码展示了如何使用JavaScript创建一个动态选中元素的效果。HTML结构包含一个带有多个span元素的div，每个span代表一个可点击的选项。当用户点击span时，对应的元素会变为活动状态，背景变为灰色，并在控制台输出所选值。每秒自动滚动到下一个元素，形成连续滚动的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 98%;
            height: 84vh;
            margin-top:20vh;
        }
        span{
            width: 5%;
            height: 10%;
            display: inline-block;
        }
        .active{
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>
<script>    
    var index,arr,NewSelect;    
    init();
    function EmptyFun(){
        index=0;
        arr = [];
        NewSelect=null;
    }
    function init(){
        EmptyFun();
        var innerHtml = '';
        for(var i =0;i<100;i++){
            var obj = {
                value:i+1,
                index:i
            };
            arr.push(obj);
            innerHtml+='<span id="span_'+obj.index+'" onclick="spanClick('+obj.index+')">'+obj.value+'</span>';
           
        }
        document.getElementById('box').innerHTML = innerHtml; 
        if(arr.length>0){            
            activeSpan(0);
            var timer = setInterval(function(){
                moverleft(index);
            },1000);
        }

    }
    function spanClick(order){
        debugger;
        index = order;
        activeSpan(order);
    }
    function moverleft(order){
        index = order+1;
        if(index>=arr.length)index=0;
        activeSpan(index);
    }

    function activeSpan(next){        
        if(NewSelect!==null){            
            NewSelect.className='';
        }        
        NewSelect = document.getElementById("span_"+next);
        if(NewSelect!==null){
            NewSelect.className='active';
        }
        if(next>98){
            
        // debugger;
        }
        var obj = arr[next];
        console.log(obj.value);
    }

    

</script>