列表的内容依次切换显示

效果：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/

posted @ 2017-01-19 16:10  米娜-火箭  阅读(190)  评论(0)  编辑  收藏  举报