js实现三个div自动循环轮播 js自动切换显示div js自动轮播显示div

JS自动切换显示DIV

原创于 2019-11-22 19:07:32 发布 · 3.6k 阅读

14 ·

CC 4.0 BY-SA版权

三块钱的博客专栏收录该内容

80 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的自动切换显示多个DIV元素的方法，通过设置定时器和利用eq方法选择并显示当前DIV，同时隐藏其他兄弟元素，实现轮播效果。此技术常用于网页设计中的广告轮播或内容轮换。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js自动切换显示div</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<div id="d1">
    <div class="c1">
      <iframe   src="https://blog.csdn.net/" width="960px" height="960px" frameborder="no"    name=""   scrolling="no">   </iframe>

    </div>
    <div class="c1">
     <iframe   src="http://u2000.onlinewebshop.net" width="960px" height="960px"   frameborder="no"  name=""   scrolling="no">   </iframe>
        
    </div>
    <div class="c1">
   <iframe   src="https://www.baidu.com" width="960px" height="960px"   frameborder="no" name=""   scrolling="no">   </iframe>
 
    
    </div>
</div>

<script>
$(function() {
    var i = 0;
    $(".c1").eq(0).show().siblings().hide();
    setInterval(function() {
        i++;
        if (i == 3) {
            i = 0;
        }
        $(".c1").eq(i).show().siblings().hide();


    }, 1000);
});
</script>

</body>
</html>