文章/答案/技术大牛

发布

社区首页 >问答首页 >使用java脚本，如何显示这3个图像循环完美地工作？

问使用java脚本，如何显示这3个图像循环完美地工作？
EN

Stack Overflow用户

提问于 2022-09-30 06:37:30

回答 5查看 62关注 0票数 -1

下面是我的基于HTML的代码，我想设计这个div中的3个，它在第一次运行后在3到5秒内隐藏在一个循环中，它再次重复执行，如何修复我的代码？为了工作这三个图像段div，使用js在一个循环中完美地工作。我想设计这个"3图像div“在循环中一个一个地执行，连续使用js。我怎样才能修正这段代码？我应该用什么来明确这个概念？还有其他解决这个错误的选择吗？

 setInterval(testimonial, 3000);
    
            function testimonial(){
                setTimeout(() => {
                const box = document.getElementById('hellouser');
                box.style.display = 'none';
                }, 1000); 
    
                setTimeout(() => {
                const rain = document.getElementById('hellouser1');
                rain.style.display = 'block';
                }, 1000); 
    
                setTimeout(() => {
                const rainbow = document.getElementById('hellouser2');
                const rain = document.getElementById('hellouser1');
                rain.style.display = 'none';
                rainbow.style.display = 'block';
                }, 3500); 
    
                setTimeout(() => {
                const rainbow = document.getElementById('hellouser2');
                const rain = document.getElementById('hellouser1');
                const box = document.getElementById('hellouser');
                rain.style.display = 'none';
                rainbow.style.display = 'none';
                box.style.display = 'block';
                }, 4500);  
            }

 .outer-circle{
                position: relative;
                border: 2px solid #c5c5c5;
                height:400px;
                width:400px;
                border-radius: 500px;
            }
    
            .inner-circle{
                height: 200px;
                width: 200px;
                border: 2px solid #c5c5c5;
                position: absolute;
                top:99px;
                left:99px;
                border-radius: 500px;
            }
            
            .users{
                position: absolute;
            }
            .helloimage, .hellouser1{
                width:100px;
                height:100px;
                border-radius: 500px;
                align-items: center;
            }
    
            .hellouser1, .hellouser2{
                display: none;
            }
    
            .test-content{
                width: 500px;
            }

    <!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>
    <body>
        <div class="testimonial">
            <div class="users">     
                <div class="hellouser" id="hellouser">
                    <img src="https://images.pexels.com/photos/372042/pexels-photo-372042.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="helloimage"/>
                    <div class="test">
                        <p class="test-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing </p>
                    </div>
                </div>
    
                <div class="hellouser1" id="hellouser1">
                    <img src="https://images.pexels.com/photos/8095733/pexels-photo-8095733.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="helloimage" />
                    <div class="test">
                        <p class="test-content">Lorem Ipsum is simply Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, . It was popularised in the 1960s with the release of Letraset sheets containing </p>
                    </div>
                </div>
                <div class="hellouser2" id="hellouser2">
                    <img src="https://images.pexels.com/photos/1065084/pexels-photo-1065084.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="helloimage" />
                    <div class="test">
                        <p class="test-content">Lorem Ipsum is simply Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, . It was popularised in the 1960s with the release of Letraset sheets containing </p>
                    </div>
                </div>
                </div>
        </div>
    
    
    </body>
    </html>

html

jquery

css

loops

javascript

回答 5

Stack Overflow用户

发布于 2022-09-30 06:52:05

您可以获取所有用户的内容，然后设置当前要显示的图像的索引，在setInterval中用display: none隐藏除目标图像之外的所有图像，并在每次迭代中将index增加一个，当index等于或超过图像length时，将索引重置为零。

const users = document.querySelectorAll(".user");
let index = 0;

const handleChange = () => {
    if (index >= users.length) {
        index = 0;
    }
    users.forEach((user) => (user.style.display = "none"));
    users[index].style.display = "unset";
    index++;
};
setInterval(handleChange, 4500);
handleChange()

.outer-circle{
                position: relative;
                border: 2px solid #c5c5c5;
                height:400px;
                width:400px;
                border-radius: 500px;
            }
    
            .inner-circle{
                height: 200px;
                width: 200px;
                border: 2px solid #c5c5c5;
                position: absolute;
                top:99px;
                left:99px;
                border-radius: 500px;
            }
            
            .users{
                position: absolute;
            }
            .helloimage, .hellouser1{
                width:100px;
                height:100px;
                border-radius: 500px;
                align-items: center;
            }
    
            .hellouser1, .hellouser2{
                display: none;
            }
    
            .test-content{
                width: 500px;
            }

<!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>
    <body>
        <div class="testimonial">
            <div class="users">     
                <div class="hellouser user" id="hellouser">
                    <img src="https://images.pexels.com/photos/372042/pexels-photo-372042.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="helloimage"/>
                    <div class="test">
                        <p class="test-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing </p>
                    </div>
                </div>
    
                <div class="hellouser1 user" id="hellouser1">
                    <img src="https://images.pexels.com/photos/8095733/pexels-photo-8095733.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="helloimage" />
                    <div class="test">
                        <p class="test-content">Lorem Ipsum is simply Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, . It was popularised in the 1960s with the release of Letraset sheets containing </p>
                    </div>
                </div>
                <div class="hellouser2 user" id="hellouser2">
                    <img src="https://images.pexels.com/photos/1065084/pexels-photo-1065084.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="helloimage" />
                    <div class="test">
                        <p class="test-content">Lorem Ipsum is simply Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, . It was popularised in the 1960s with the release of Letraset sheets containing </p>
                    </div>
                </div>
                </div>
        </div>
    
    
    </body>
    </html>

票数 1

Stack Overflow用户

发布于 2022-09-30 06:55:49

您的间隔为3000 ms，而其中两个超时时间分别为3500 ms和4500 ms。

超时时间必须短于间隔期间。

setInterval(testimonial, 4500);

function testimonial(){
    setTimeout(() => {
        const box = document.getElementById('hellouser');
        const rain = document.getElementById('hellouser1');
        box.style.display = 'none';
        rain.style.display = 'block';
    }, 1500);
    setTimeout(() => {
        const rain = document.getElementById('hellouser1');
        const rainbow = document.getElementById('hellouser2');
        rain.style.display = 'none';
        rainbow.style.display = 'block';
    }, 3000);
    setTimeout(() => {
        const rainbow = document.getElementById('hellouser2');
        const box = document.getElementById('hellouser');
        rainbow.style.display = 'none';
        box.style.display = 'block';
    }, 4500);
}

.outer-circle{
                position: relative;
                border: 2px solid #c5c5c5;
                height:400px;
                width:400px;
                border-radius: 500px;
            }
    
            .inner-circle{
                height: 200px;
                width: 200px;
                border: 2px solid #c5c5c5;
                position: absolute;
                top:99px;
                left:99px;
                border-radius: 500px;
            }
            
            .users{
                position: absolute;
            }
            .helloimage, .hellouser1{
                width:100px;
                height:100px;
                border-radius: 500px;
                align-items: center;
            }
    
            .hellouser1, .hellouser2{
                display: none;
            }
    
            .test-content{
                width: 500px;
            }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <!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>
    <body>
        <div class="testimonial">
            <div class="users">     
                <div class="hellouser" id="hellouser">
                    <img src="https://images.pexels.com/photos/372042/pexels-photo-372042.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="helloimage"/>
                    <div class="test">
                        <p class="test-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing </p>
                    </div>
                </div>
    
                <div class="hellouser1" id="hellouser1">
                    <img src="https://images.pexels.com/photos/8095733/pexels-photo-8095733.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="helloimage" />
                    <div class="test">
                        <p class="test-content">Lorem Ipsum is simply Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, . It was popularised in the 1960s with the release of Letraset sheets containing </p>
                    </div>
                </div>
                <div class="hellouser2" id="hellouser2">
                    <img src="https://images.pexels.com/photos/1065084/pexels-photo-1065084.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="helloimage" />
                    <div class="test">
                        <p class="test-content">Lorem Ipsum is simply Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, . It was popularised in the 1960s with the release of Letraset sheets containing </p>
                    </div>
                </div>
                </div>
        </div>
    
    
    </body>
    </html>

票数 0

Stack Overflow用户

发布于 2022-09-30 07:00:07

这就是你要的

  function showUser() {
            let users = document.querySelectorAll('.hellouser');
            let count = 0;
            setInterval(() => {
                users.forEach(user => {
                    user.hidden = true;
                    user.dataset.show = false;
                });
                users[count].hidden = false;
                users[count].dataset.show = true;
                count++;
                if (count > users.length - 1) {
                    count = 0;
                }
            }, 3000);
        }
        
        showUser()

 .outer-circle {
            position: relative;
            border: 2px solid #c5c5c5;
            height: 400px;
            width: 400px;
            border-radius: 500px;
        }

        .inner-circle {
            height: 200px;
            width: 200px;
            border: 2px solid #c5c5c5;
            position: absolute;
            top: 99px;
            left: 99px;
            border-radius: 500px;
        }

        .users {
            position: absolute;
        }

        .helloimage,
        .hellouser1 {
            width: 100px;
            height: 100px;
            border-radius: 500px;
            align-items: center;
        }

        .hellouser1,
        .hellouser2 {
            display: none;
        }

        .test-content {
            width: 500px;
        }

  <div class="testimonial">
        <div class="users">
            <div data-show="true" class="hellouser">
                <img src="https://images.pexels.com/photos/372042/pexels-photo-372042.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                    alt="" class="helloimage" />
                <div class="test">
                    <p class="test-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
                        printer took a galley of type and scrambled it to make a type specimen book. It has survived not
                        only five centuries, but also the leap into electronic typesetting, remaining essentially
                        unchanged. It was popularised in the 1960s with the release of Letraset sheets containing </p>
                </div>
            </div>

            <div hidden data-show="false" class="hellouser">
                <img src="https://images.pexels.com/photos/8095733/pexels-photo-8095733.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                    alt="" class="helloimage" />
                <div class="test">
                    <p class="test-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
                        printer took a galley of type and scrambled it to make a type specimen book. It has survived not
                        only five centuries, but also the leap into electronic typesetting, remaining essentially
                        unchanged. It was popularised in the 1960s with the release of Letraset sheets containing </p>
                </div>
            </div>

            <div hidden data-show="false" class="hellouser">
                <img src="https://images.pexels.com/photos/1065084/pexels-photo-1065084.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                    alt="" class="helloimage" />
                <div class="test">
                    <p class="test-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
                        printer took a galley of type and scrambled it to make a type specimen book. It has survived not
                        only five centuries, but also the leap into electronic typesetting, remaining essentially
                        unchanged. It was popularised in the 1960s with the release of Letraset sheets containing </p>
                </div>
            </div>
        </div>
    </div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73904862

复制

相似问题

问使用java脚本，如何显示这3个图像循环完美地工作？
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用java脚本，如何显示这3个图像循环完美地工作？EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用java脚本，如何显示这3个图像循环完美地工作？
EN