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

时间:2013-11-03 06:37:32

标签: javascript jquery css html5 css3

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

1 个答案:

答案 0 :(得分: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