使用时间间隔显示和隐藏divCSHTML文件

问题描述

我试图根据时间间隔显示div并进行隐藏。 las，到目前为止，我还没有成功。

这是一个ASP.Net MVC主页/索引页。起初，我认为问题的症结在于divs的定位，但没有运气。请为我指出正确的方向，老实说，我不知道从这里去哪里

$(function() {
  var counter = 0,divs = $('#div1,#div2,#div3,#div4,#div5,#div6,#div7,#div8,#div9');

  function showDiv() {
    divs.hide().filter(function(index) {
      return index == counter % 9;
    }).show('fast');
    counter++;
  };

  showDiv();

  setInterval(function() {
    showDiv();
  },8 * 1000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
@{ 
  ViewBag.Title = "Index"; 
  Layout = "~/Views/Shared/_HomeGeneraLayout.cshtml"; 
}

<section class="row">
  <div class="col-12 slider">
    <div id="demo-1" data-zs-src='["../../Images/b1.jpg","../../Images/b4.jpg","../../Images/b5.jpg","../../Images/b2.jpg","../../Images/c9.jpg","../../Images/cc.jpg","../../Images/b6.jpg"]' data-zs-overlay="dots">
      <div class='demo-inner-content' id='container'>
        <div id='div1' style="display: none;">
          <h1>Div 1</h1>
        </div>
        <div id='div2' style="display: none;">
          <h1>Div 2</h1>
        </div>
        <div id='div3' style="display: none;">
          <h1>Div 3</h1>
        </div>

      </div>
    </div>
  </div>
</section>
<section class="row abt-tab">
  <div class="offset-lg-1 col-lg-10 about-text">
    <div class="col-lg-12 title">
      Our Partners
      <div class="underline"></div>
    </div>
    <div>
      Lorem ipsum dolor sit amet,consectetur adipiscing elit. Curabitur gravida libero quis orci porta,quis tempor libero scelerisque. Donec varius,sapien ut placerat vestibulum,dolor augue porttitor nibh,eu scelerisque odio dolor at ex. Proin in diam
      eu nisi gravida vehicula. Maecenas ultricies ut felis a pulvinar. Aenean at mi in ante convallis scelerisque vitae a velit. Nulla finibus mollis bibendum. Nam elementum interdum lorem,non aliquam est pellentesque vitae.
    </div>
    <div class="row course-menu">
      <img src="~/Images/C44.jpg" />
      <img src="~/Images/nrrl.jpg" />
    </div>
  </div>
</section>

运行正常，但是在Home / index.cshtml下面的asp.net MVC项目中，没有这种运气。

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_HomeGeneraLayout.cshtml";
}

    <style type="text/css" media="screen">


   
    </style>
    <section class="row">
        <div class="col-12 slider">
            <div id="demo-1" data-zs-src='["../../Images/b1.jpg","../../Images/b6.jpg"]' data-zs-overlay="dots">
                
                <div class='demo-inner-content' id='container'>
                    <div id='div1' style="display:none;" >
                        <h1>Div 1</h1>
                    </div>
                    <div id='div2' style="display:none;">
                        <h1>Div 2</h1>
                    </div>
                    <div id='div3' style="display:none;">
                        <h1>Div 3</h1>
                    </div>

                </div>
            </div>
        </div>
</section>
    <section class="row abt-tab">
        <div class="offset-lg-1 col-lg-10 about-text">
            <div class="col-lg-12 title">
                Our Partners
                <div class="underline"></div>
            </div>

            <div>
               Lorem ipsum dolor sit amet,eu scelerisque odio dolor at ex. Proin in diam eu nisi gravida vehicula. Maecenas ultricies ut felis a pulvinar. Aenean at mi in ante convallis scelerisque vitae a velit. Nulla finibus mollis bibendum. Nam elementum interdum lorem,non aliquam est pellentesque vitae.
            </div>
            <div class="row course-menu">
                <img src="~/Images/C44.jpg" />
                <img src="~/Images/nrrl.jpg" />
            </div>
        </div>
    </section>

    <script>

    $(function () {

        var counter = 0,#div3');

        function showDiv() {
            divs.hide() // hide all divs
                .filter(function (index) { return index == counter % 3; }) // figure out correct div to 
       show
                .show('fast'); // and show it

            counter++;
        }; // function to loop through divs and show correct div

        showDiv(); // show first div    

        setInterval(function () {
            showDiv(); // show next div
        },10 * 1000); // do this every 10 seconds    

    });
  </script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）