用于在页面上旋转某些div元素的Javascript函数

Question

我有一些javascript函数-显示一些文本的弹出窗口。我尝试轮换两个" section“元素，但是如果我用自定义类向HTML添加另一个section，页面只显示第一个元素。请帮助我添加1-2多个元素，并旋转它。这个想法是有2个或更多的元素与类自定义，并以随机顺序显示它，最后停止。谢谢。

​

    setInterval(function () {
    	$(".custom").stop().slideToggle('slow');
    }, 2000);
    $(".custom-close").click(function () {
    	$(".custom-social-proof").stop().slideToggle('slow');
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="custom">
    	<div class="custom-notification">
    		<div class="custom-notification-container">
    			<div class="custom-notification-image-wrapper">
    				<img src="checkbox.png">
    			</div>
    			<div class="custom-notification-content-wrapper">
    				<p class="custom-notification-content">
    					Some Text
    				</p>
    			</div>
    
    		</div>
    		<div class="custom-close"></div>
    	</div>
    </section>

​

Answer 1

设置不显示任何页面加载的部分，而不是第一部分。检查下面第二部分的代码：

<section class="custom" style=" display:none">
    <div class="custom-notification">
      <div class="custom-notification-container">
        <div class="custom-notification-image-wrapper">
          <img src="checkbox.png">
        </div>

        <div class="custom-notification-content-wrapper">
          <p class="custom-notification-content">
            Mario<br>si kupi <b>2</b> matraka  
            <small>predi 1 chas</small>
          </p>
        </div>

      </div>
      <div class="custom-close"></div>
    </div>
</section>

并且您需要在jQuery代码中进行如下修改：

    setInterval(function () {
        var sectionShown = 0;
        var sectionNotShown = 0;
        $(".custom").each(function(i){
            if ($(this).css("display") == "block") {
                sectionShown = 1;
                $(this).slideToggle('slow');
            } else {
                if (sectionShown == 1) {
                    $(this).slideToggle('slow');
                    sectionShown = 0;
                    sectionNotShown = 1;
                }
            }
        });                
        if (sectionNotShown == 0) {
            $(".custom:first").slideToggle('slow');
        }
    }, 2000);

希望能对你有所帮助。