0

我建立了一个没有任何服务器端脚本/语言的网站，只使用 HTML/JavaScript/jQuery。

在我的网站中，我保留了一个普通的 stream.html 页面（没有 CSS、格式等）

<html>
<head>
</head>
<body>
<div id="textParagraphs">
<p>Para 1</p>
<p>Para 2</p>
<p>Para 3</p>
<p>Para 4</p>
</div>
</body>
</html>

在我拥有的所有其他 html 页面中（使用 divs/formatting/css 等），我打算在标题中保留一个部分，该<p>部分从页面中提取前三个部分，并通过旋转效果显示它们。例如： 有三个段落之后，应该显示 Para1 ->淡出 -> Para2 -> Fade out -> Para3

如何<p>从另一个页面中提取部分并在此处显示它们？

4

3 回答 3

2

我建议将这些段落存储为 JSON。

然后，您可以使用 jquery 从每个页面请求它们，$.getJSON()而不必解析 HTML 文档。如果您想维护 stream.html 文件，您可以获取 JSON 并打印所有这些文件，而不是只处理前三个文件。

在此处查看示例：http: //api.jquery.com/jQuery.getJSON/

获得 (3) 项列表后，您可以设置轮播（google for carousel javascript）。有大量的脚本或 jQuery 插件可以做到这一点，找到一个你喜欢的！

于 2012-12-24T04:55:49.807 回答
1

jQuery.get()基本上，您可以使用函数获取该 html 页面的内容。然后在结果中您应该<p>使用jQuery(result).find("p"). 现在您有了p标签数组，您可以使用这个简单的carousel脚本在它们之间进行轮换：

var carousel = {
    _defaultParameters: {
        container: null,
        paragraphs: [],
        timeout: 3000,
        nextItemIndex: 0
    },

    rotate: function(param){
        var param = $.extend(true, {}, this._defaultParameters, param);

        if(param.paragraphs.length == 0) return;
        if(param.nextItemIndex > param.paragraphs.length - 1){
            param.nextItemIndex = 0;
        }

        param.container.empty().append(param.paragraphs[param.nextItemIndex]);

        param.nextItemIndex++;
        setTimeout(function(){ carousel.rotate(param); }, param.timeout);
     }
}

$(function(){

    jQuery.get('data_source.html', function(result) { // replace data_source.html with your external html file url
        var paragraphs = jQuery(result).find("p");

        carousel.rotate({
            container: $("#rotatorContainerID"), //replace this with your container
            paragraphs: paragraphs
        });
    });

});

替换'data_source.html'为包含该<p>标签的外部 html 文件的地址。还将更改为container: $("#rotatorContainerID")将id承载<p>标签的元素，并且将在其中发生旋转。

要演示carousel功能，您可以检查这个小提琴：http: //jsfiddle.net/5AgcE/4/

于 2012-12-24T05:06:39.330 回答
-2

这是最简单的方法：

var allPs = $('p');

var p1 = $(allPs[0]).html();

var p2 = $(allPs[1]).html();

var p3 = $(allPs[2]).html();

您还可以添加一些测试，例如：

if(allPs.length >= 3) {

}
于 2012-12-24T05:01:39.523 回答