无法通过jQuery更改轮播横幅图片

时间:2018-10-22 06:14:43

标签: javascript jquery

我在html下方的轮播中有一些图片。我想通过jQuery更改轮播的图像。 当我在控制台中使用单个命令时,图像会发生变化。但是,如果我在javascript中使用相同的命令,则图像不会更改。

<div class="slick-list draggable">
    <div class="slick-track" style="opacity: 1; width: 14839px; transform: translate3d(-6745px, 0px, 0px);">
        <div class="slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true" style="width: 1349px;" tabindex="-1">
            <div>
                <div class="zz-hp-carousel-item" style="width: 100%; display: inline-block;">
                    <div class="zz-carousel-image">
                        <div class="container carousel-container zz-container">
                            <div class="zz-carousel-item-text">
                                <div class="carousel-text-wrapper">
                                    <div>
                                        <p class="herocarousel-head">Hello There1.</p>
                                        <p class="herocarousel-subhead">Welcome to the world of jQuery</p>
                                        <p class="herocarousel-desc"></p>
                                    </div>
                                    <div class="zz-carousel-action" data-analyitcs-title="PHK">
                                        <a href="/content/xxx/travels/en/information/destinations.html" target="_blank" tabindex="-1"><button class="btn btn-lzzht hc-booknow-btn" tabindex="-1">Book Now</button></a>

                                    </div>
                                </div>
                            </div>
                        </div>

                        <img class="img-fluid lazyloaded" src="/content/dam/xxxv2/pqr-website/homepage/banner/2018/10/PHK.jpg" data-src="/content/dam/xxxv2/pqr-website/homepage/banner/2018/10/PHK.jpg" title="PHK" alt="PHK">
                    </div>
                </div>
            </div>
        </div>
        <div class="slick-slide" data-slick-index="0" aria-hidden="true" style="width: 1349px;" role="tabpanel" id="slick-slide00" aria-describedby="slick-slide-control00" tabindex="-1">
            <div>
                <div class="zz-hp-carousel-item" style="width: 100%; display: inline-block;">
                    <div class="zz-carousel-image">
                        <div class="container carousel-container zz-container">
                            <div class="zz-carousel-item-text">
                                <div class="carousel-text-wrapper">

                                    <div>
                                        <p class="herocarousel-head">Hello There2</p>
                                        <p class="herocarousel-subhead">Welcome to the world of jQuery</p>
                                    </div>
                                    <div class="zz-carousel-action" data-analyitcs-title="Experience happiness with xxx">

                                        <a href="/content/xxx/travels/en/campazzns/xxx-offers.html" target="_blank" tabindex="-1"><button class="btn-default btn hc-learn-btn" tabindex="-1">Learn More </button></a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <img class="img-fluid lazyloaded" src="/content/dam/xxxv2/pqr-website/homepage/banner/2018/10/Deals.jpg" data-src="/content/dam/xxxv2/pqr-website/homepage/banner/2018/10/Deals.jpg" title="Deals" alt="Deals">
                    </div>
                </div>
            </div>
        </div>
        <div class="slick-slide" data-slick-index="1" aria-hidden="true" style="width: 1349px;" role="tabpanel" id="slick-slide01" aria-describedby="slick-slide-control01" tabindex="-1">
            <div>
                <div class="zz-hp-carousel-item" style="width: 100%; display: inline-block;">
                    <div class="zz-carousel-image">
                        <div class="container carousel-container zz-container">
                            <div class="zz-carousel-item-text">
                                <div class="carousel-text-wrapper">

                                    <div>
                                        <p class="herocarousel-head">Hello There3</p>
                                        <p class="herocarousel-subhead">Welcome to the World oh jQuery</p>
                                        <p class="herocarousel-desc"></p>
                                    </div>
                                    <div class="zz-carousel-action" data-analyitcs-title="Booking with saving!">

                                        <a href="/content/xxx/travels/en/campazzns/hdfc-offer.html" tabindex="-1"><button class="btn-default btn hc-learn-btn" tabindex="-1">Learn more</button></a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <img class="img-fluid lazyloaded" src="/content/dam/xxxv2/pqr-website/homepage/banner/2018/10/Hdfc.jpg" data-src="/content/dam/xxxv2/pqr-website/homepage/banner/2018/10/Hdfc.jpg" title="Hdfc" alt="Hdfc">
                    </div>
                </div>
            </div>
        </div>
        <div class="slick-slide" data-slick-index="2" aria-hidden="true" style="width: 1349px;" role="tabpanel" id="slick-slide02" aria-describedby="slick-slide-control02" tabindex="-1">
            <div>
                <div class="zz-hp-carousel-item" style="width: 100%; display: inline-block;">
                    <div class="zz-carousel-image">
                        <div class="container carousel-container zz-container">
                            <div class="zz-carousel-item-text">
                                <div class="carousel-text-wrapper">

                                    <div>
                                        <p class="herocarousel-head">Hello There4</p>
                                        <p class="herocarousel-subhead">Welcome to the world of jQuery</p>
                                        <p class="herocarousel-desc"></p>
                                    </div>
                                    <div class="zz-carousel-action" data-analyitcs-title="Honeymoon travels">
                                        <a href="https://www.goxxx.in/content/xxx/travels/en/information/destinations.html" target="_blank" tabindex="-1"><button class="btn btn-lzzht hc-booknow-btn" tabindex="-1">Book Now</button></a>

                                    </div>
                                </div>
                            </div>
                        </div>

                        <img class="img-fluid lazyloaded" src="/content/dam/xxxv2/pqr-website/homepage/banner/2018/10/ML.jpg" data-src="/content/dam/xxxv2/pqr-website/homepage/banner/2018/10/ML.jpg" title="ML" alt="ML">
                    </div>
                </div>
            </div>
        </div>

jQuery 1st:

$("#slick-slide02").find(">div > .ig-hp-carousel-item > .ig-carousel-image img").attr("src","https://www.xxx.in/content/dam/xxx/yyy-website/banner/2018/10/PHK-to-delhi_HOMEPAGE.jpg");

JavaScript:

<script>
function homepageBannerLoad() 
{

 $("#slick-slide02").find(">div > .ig-hp-carousel-item > .ig-carousel-image img").attr("src","https://www.xxx.in/content/dam/xxx/yyy-website/banner/2018/10/PHK-to-delhi_HOMEPAGE.jpg"); //jQuery 1st

          console.log("first banner changed");

        $("#slick-slide00").find(" > div > .zz-hp-carousel-item > .zz-carousel-image > .container.carousel-container.zz-container >  .zz-carousel-item-text > .carousel-text-wrapper >  div >h1").text("Banner A");

$("#slick-slide00").find(" > div > .zz-hp-carousel-item > .zz-carousel-image > .container.carousel-container.zz-container >  .zz-carousel-item-text > .carousel-text-wrapper >  div >p:first").text("Experience the Magic of Adobe Target");

$("#slick-slide00").find(" > div > .zz-hp-carousel-item > .zz-carousel-image > .container.carousel-container.zz-container >  .zz-carousel-item-text > .carousel-text-wrapper >  div >h2").text("");


$("#slick-slide00").find(" > div > .zz-hp-carousel-item > .zz-carousel-image > .container.carousel-container.zz-container >  .zz-carousel-item-text > .carousel-text-wrapper >  .zz-carousel-action > a:first > button").html("Know More");

$("#slick-slide00").find(" > div > .zz-hp-carousel-item > .zz-carousel-image > .container.carousel-container.zz-container >  .zz-carousel-item-text > .carousel-text-wrapper >  .zz-carousel-action > a:last > button").remove();


    $("#slick-slide00").find("> div > .zz-hp-carousel-item > .zz-carousel-image > .container.carousel-container.zz-container >  .zz-carousel-item-text > .carousel-text-wrapper > div:last > a:first").attr("href","https://www.ppxxx.in"); 


console.log("second banner change done");

$("#slick-slide01").find(" > div > .zz-hp-carousel-item > .zz-carousel-image > .container.carousel-container.zz-container >  .zz-carousel-item-text > .carousel-text-wrapper >  div >h1").text("Banner B");

$("#slick-slide01").find(" > div > .zz-hp-carousel-item > .zz-carousel-image > .container.carousel-container.zz-container >  .zz-carousel-item-text > .carousel-text-wrapper >  div >p:first").text("How Did you find it?");

$("#slick-slide01").find(" > div > .zz-hp-carousel-item > .zz-carousel-image > .container.carousel-container.zz-container >  .zz-carousel-item-text > .carousel-text-wrapper >  div >h2").text("");

          console.log("third banner  change done");


        };      
        window.onload = function(){homepageBannerLoad();};      
</script>

因此jQuery 1st不起作用,但所有其他jQuery命令均起作用。因此想检查是否需要通过其他方式更改轮播图片。

0 个答案:

没有答案