如何解决使用时间间隔显示和隐藏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 举报,一经查实,本站将立刻删除。