使用JQuery实现盒子自动循环切换

冷不防 2021-09-18 16:42 554阅读 1赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            /*设置盒子大小背景色*/
            .div {
                width: 200px;
                height: 200px;
                background-color: #f00;
                /*使盒子不占位*/
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div class="diva">
            <div class="div"><h2>26565</h2><p>23232</p></div>
            <div class="div" style="display:none; background-color: #0f0;">222</div>
        </div>
        
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
        //div的统一class = 'div'
        var index =0;
        //3秒轮播一次
        var timer = setInterval(function(){
        index = (index == 1) ? 0 : 1;          
        //某个div显示，其他的隐藏
        //fadeIn()淡入  fadeOut()淡出
        $(".div").fadeOut(2000).eq(index).fadeIn(1000);    
    }, 3000);
    </script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，554人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript实现图片自动切换

JavaScript实现图片自动切换 1、 HTML <div class="slider_box"> <ul>

青旅半醒/ 2023年10月06日 18:38/ 0 赞/ 12 阅读

相关 Android 滑动切换（首页展示，图片、新闻自动切换，循环切换，自动和手动）

最近做的项目，要用到滑动切换的效果，就是类似新闻客户端的图片一张一张的自动切换或者手动滑动切换，于是就搜集了一下资料，使用两种方式实现这样的效果，分别是ViewFlipper和

悠悠/ 2022年09月20日 15:04/ 0 赞/ 175 阅读

相关使用JQuery实现简单的图片切换

1.html代码 <div id="slides-show"> <div class="slides-wrap"> <div class

快来打我*/ 2022年08月27日 04:51/ 0 赞/ 226 阅读

相关 JQuery实现图片切换（自动切换+手动切换）

学习JS的时候本来积攒了很多有趣的小例子，但是苦于没有找到一些好的平台来展示这些JS效果。今天发现了RunJS这个分享代码的平台，迫不及待

ゝ一纸荒年。/ 2022年08月06日 14:15/ 0 赞/ 298 阅读

相关 jquery li循环轮播切换

jquery li循环轮播切换效果，请自行引入jquery <!doctype html> <html> <head> <meta chars

叁歲伎倆/ 2022年06月09日 00:42/ 0 赞/ 144 阅读

相关 Jquery实现横向tab切换

　//需求：鼠标放在不同的导航栏上，下面显示的内容自动切换　　![1663270-20190511160128681-899822914.png][] ---------

以你之姓@/ 2021年11月09日 07:52/ 0 赞/ 398 阅读

相关 jQuery实现tab切换

$('tab-content li').click(function() { var i = $(this).index();//下标

野性酷女/ 2021年11月05日 06:10/ 0 赞/ 356 阅读

相关 jquery实现图片切换

<div> <img class="imgclick" src="img/pic1.png" /> </div>

布满荆棘的人生/ 2021年09月19日 10:10/ 0 赞/ 444 阅读

相关使用JQuery实现盒子自动循环切换

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

冷不防/ 2021年09月18日 16:42/ 1 赞/ 555 阅读

相关 JQuery盒子模型

JQuery盒子模型 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9

曾经终败给现在/ 2021年07月25日 21:38/ 0 赞/ 400 阅读