我在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命令均起作用。因此想检查是否需要通过其他方式更改轮播图片。