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