Javascript 如何拉动<；p>；标记，并在它们之间旋转

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

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

第1款

第2段

第3段

第4段

在我拥有的所有其他html页面（使用div/formatting/css等）中，我打算在页眉中保留一个部分，从页面中拾取前三个

部分，并通过旋转效果显示它们。 例如：is拥有三个段落后，它应该显示Para1->fade out->Para2->fade out->Para3

---

如何从另一个页面中提取

部分并在此处显示它们？
我建议将这些段落存储为JSON

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

请查看以下示例：

一旦你有了（3）个项目的列表，你就可以设置一个旋转木马（谷歌搜索
carouseljavascript
）。有很多脚本或jQuery插件可以实现这一点，找到一个你喜欢的
 这是最简单的方法：

var allPs = $('p');

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

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

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

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

if(allPs.length >= 3) {

}

基本上，您可以使用
jQuery.get（）
函数获取该html页面的内容。
然后在结果中，您应该使用
jQuery（result）搜索
标记。查找（“p”）
。
现在您已经有了
p
标记的数组，您可以使用这个简单的
旋转木马
脚本在这些标记之间旋转：

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\u source.html'
替换为包含该
标记的外部html文件的地址。同时将
容器：$（“#rotatorContainerID”）
更改为将承载
标记的元素的
id
，并在其中进行旋转

要演示旋转木马的功能，您可以查看此提琴：
我将问题解释为来自不同页面的意思。另外，我会尽可能有选择性地
$（'#textparegations>p'）
很好，我不知道你可以像那样在查询中包装任意字符串，太棒了！
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
        });
    });

});