javascript - 在滑动 div 中加载 html/文本的最佳方法是什么？

Question

这就是我想要做的。我想在主要内容上创建一种幻灯片效果。如果用户单击此 div 上的向右或向左箭头，它将向前/向后移动到下一个“幻灯片/文本”。此 div 或幻灯片中的内容包括图像、文本、超链接，并且可以通过 CSS 设置样式。我的问题是，创造这种效果的最佳途径是什么？我不想使用闪光灯。我正在考虑 HTML5、CSS3 和 jQuery 和/或 javascript 的组合。有没有人知道或知道与我描述的类似的例子？非常感谢您的建议或意见。

Answer 1

有很多幻灯片脚本可用，你也可以试试这个

            <div class="mosaic-slide" style="z-index: 10;">

                <!-- The mosaic-slide div and the tiles are generated by jQuery -->
                <div class="tile" style="..."></div>
                <div class="tile" style="..."></div>
                <div class="tile" style="..."></div>
                <div class="tile" style="..."></div>

            </div>
        </div>

CSS：

        #mosaic-slideshow{
            /* The slideshow container div */
            height:500px;
            margin:0 auto;
            position:relative;
            width:670px;
        }

        .mosaic-slide{
            /* This class is shared between all the slides */
            left:80px;
            position:absolute;
            top:25px;

            border:10px solid #555;

            /* CSS3 rounded corners */
            -moz-border-radius:20px;
            -webkit-border-radius:20px;
            border-radius:20px;
        }

        .tile{
            /* The individual tiles */
            height:60px;
            width:60px;
            float:left;
            border:1px solid #555;
            border-width:0 1px 1px 0;
            background-color:#555;
        }

演示： http ://demo.tutorialzine.com/2010/03/mosaic-slideshow-jquery-css/demo.html