为了账号安全,请及时绑定邮箱和手机立即绑定

JS如何控制背景淡入淡出?

JS如何控制背景淡入淡出?

长风秋雁 2019-05-13 17:08:36
JS如何控制背景淡入淡出?
查看完整描述

2 回答

?
神不在的星期二

TA贡献1963条经验 获得超6个赞

下代码可以实现,不过你要首先下载一个JS插件:Jquery,我用的是jquery-1.9.1.min.js,你下载下来后放到网页同级目录就可以了,如入代码适用于2张或多张图片。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<div id="imgbox">

    <img src="11.jpg" /><img src="22.jpg" />

</div>

<script src="jquery-1.9.1.min.js"></script>

<script>

$(document).ready(function(){

    $("#imgbox img").fadeOut(0).eq(0).fadeIn(0);

    var i = 0;

    setInterval(function(){

        if($("#imgbox img").length > (i+1)){

            $("#imgbox img").eq(i).fadeOut(0).next("img").fadeIn(1000);

            i++;

        }

        else{

            $("#imgbox img").eq(i).fadeOut(0).siblings("img").eq(0).fadeIn(1000);

            i = 0;

        }

    },2000);

});

</script>

 




查看完整回答
反对 回复 2019-05-14
?
小怪兽爱吃肉

TA贡献1852条经验 获得超1个赞

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<html>

<head>

    <style>

        html,body{width:100%;height:100%;margin:0px auto;padding:0px auto;}

        .bgdiv{width:100%;height:100%;position:absolute;z-index:-999;}

        .bgdiv img{width:100%;height:100%;border:0px;}

    </style>

    <script src="jquery-1.9.1.min.js"></script>

    <script>

    $(document).ready(function(){

        $("#imgbox img").fadeOut(0).eq(0).fadeIn(0);

        var i = 0;

        setInterval(function(){

            if($("#imgbox img").length > (i+1)){

                $("#imgbox img").eq(i).fadeOut(0).next("img").fadeIn(1000);

                i++;

            }

            else{

                $("#imgbox img").eq(i).fadeOut(0).siblings("img").eq(0).fadeIn(1000);

                i = 0;

            }

        },2000);

    });

    </script>

</head>

<body>

    <div id="imgbox" class="bgdiv">

        <img src="11.jpg" /><img src="22.jpg" />

    </div>

    <div>网页其他内21容网页其他3内23网页其他内1容312网页其他内容11</div>

</body>

</html>

 




查看完整回答
反对 回复 2019-05-14
  • 2 回答
  • 0 关注
  • 585 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号