Question

我自己写了代码

这里是

我自己写了我将图片网址动态添加到.pgwslider类。＆＃39;

function carouselImgaeData() {
    var image_array = image_list.split("|");
          for (var i = 0, len = image_array.length; i < len; i++) {
            var image1 = image_array[0].replace(/ /g, "");
            image_url = image1.replace(/[\\]/g, '/');
             //Dynamically Appending images to the class .pgwSlider 
            $('.pgwSlider').append('<li><img width="420" height="300" src="' + image_url + '"  ></li>');

    };
}'

Answer 1

假设您的HTML中有以下标记：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="img_chania.jpg" alt="Chania">
        </div>

        <div class="item">
            <img src="img_chania2.jpg" alt="Chania">
        </div>

        <div class="item">
            <img src="img_flower.jpg" alt="Flower">
        </div>

        <div class="item">
            <img src="img_flower2.jpg" alt="Flower">
        </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

您需要删除div类＆＃34; carousel-inner＆＃34;中的项目，因此幻灯片的包装器将如下所示：

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <!-- Items will be created dynamically here -->         
    </div>

现在转到你的JS文件，（我假设它正在工作，你已经设置了JQuery和html（＆＃39;＆＃39;），追加（＆＃39;＆＃39;），或者prepend（＆＃39;＆＃39;）方法可以添加如下文字：

$(document).on('load', function(){
//it can also be $(window) 
    $('.carousel-inner').html('<div class="item"><img src="img_chania2.jpg" alt="Chania"></div>');
});

更多信息：window.onload VS document.onload

在使用JQuery（循环，函数嵌套等）进行编码时，有很多方法可以做到这一点，这取决于你。

当想要加载动态HTML时，还有几件事需要考虑，第一个也是最重要的是SEO受此影响，所以考虑到这一点，谷歌机器人会在第一次抓取你的HTML标记加载，所以如果谷歌机器人没有为SEO搜索引擎找到任何链接或元素（在这种情况下的图像），那么谷歌将无法识别太多信息。

更多信息：https://www.google.com/webmasters/

如何使用jquery动态加载图像到任何旋转木马？

1 个答案: