使用jQuery在特定时间间隔显示和隐藏div

使用jQuery在特定时间间隔显示和隐藏div,第1张

使用jQuery在特定时间间隔显示和隐藏div

此处的 工作示例 -在URL中添加/ edit 以与代码一起播放您只需要使用Javascript

setInterval
)函数

$('html').addClass('js');$(function() {  var timer = setInterval(showDiv, 5000);  var counter = 0;  function showDiv() {    if (counter == 0) {      counter++;      return;    }    $('div', '#container')      .stop()      .hide()      .filter(function() {        return this.id.match('div' + counter);      })      .show('fast');    counter == 3 ? counter = 0 : counter++;  }});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  <title>Sandbox</title>  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />  <style type="text/css" media="screen">    body {      background-color: #fff;      font: 16px Helvetica, Arial;      color: #000;    }    .display {      width: 300px;      height: 200px;      border: 2px solid #000;    }    .js .display {      display: none;    }  </style></head><body>  <h2>Example of using setInterval to trigger display of Div</h2>  <p>The first div will display after 10 seconds...</p>  <div id='container'>    <div id='div1'  >      div1    </div>    <div id='div2'  >      div2    </div>    <div id='div3'  >      div3    </div>    <div></body></html>

编辑:

为了回应您对容器div的评论,只需对此进行修改

$('div','#container')

对此

$('#div1, #div2, #div3')


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/5640959.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-12-16
下一篇 2022-12-16

发表评论

登录后才能评论

评论列表(0条)

保存