列表的内容依次切换显示

最新推荐文章于 2021-08-04 07:25:51 发布

weixin_30410999

最新推荐文章于 2021-08-04 07:25:51 发布

阅读量191

点赞数

原文链接：http://www.cnblogs.com/mina-huojian66/p/6307051.html

版权

效果：http://runjs.cn/code/cahcrllk

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fade away</title>
    <style>
        #news{
            position: relative;
            list-style: none;
        }
        #news li{
            position: absolute;
            background: #dd93c2;
        }
    </style>
</head>
<body>
    <ul id="news">
        <li>1<img src="image/3d/ps1.jpg"></li>
        <li>2<img src="image/3d/ps2.jpg"></li>
        <li>3<img src="image/3d/ps3.jpg"></li>
        <li>4<img src="image/3d/ps4.jpg"></li>
    </ul>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
        var elements=$('#news').children();
        for (var i = 0; i < elements.length; i++) {
            $(elements[i]).css('z-index', String(elements.length-i)).hide();
        };
        setTimeout((function() {
            animation(elements, 1, 0);
        }), 0);
        $(elements[0]).show();

        function animation(elements, current, last){
            if ((current + 1) < elements.length) {
                current = current + 1;
                last = current - 1;
            } else {
                current = 0;
                last = elements.length - 1;
            }
            $(elements[last]).slideUp(500);
            $(elements[current]).slideDown(500);
            setTimeout((function() {
                animation(elements,current, last);
            }),1000);
        }
    </script>
</body>
</html>

或者可用innerfade插件能让任意列表形式的内容依次淡入淡出切换显示，或是上下切换显示。内容可以是文字，图片等。

https://medienfreunde.de/lab/innerfade/

转载于:https://www.cnblogs.com/mina-huojian66/p/6307051.html

weixin_30410999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
列表的内容依次切换显示

效果：http://runjs.cn/code/cahcrllk<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>fade away</title> <style> ...
复制链接

扫一扫