使用jquery更改背景图片网址[重复]

Posted 2023-03-15

【中文标题】使用jquery更改背景图片网址[重复]

【英文标题】：Change a background image url using jquery [duplicate]

【发布时间】：2018-11-07 00:23:53

【问题描述】：

我需要使用 jquery 更改 .slide 类中的背景图片 url。我的 html 代码如下所示。它看起来像https://pathao.com 主页滑块。

<div class="slide show" style="background: linear-gradient(60deg,#224455,rgba(255, 186, 22, 0.5)), url('http://localhost/commercial/gomo/img/section01-background.png'); min-height: 600px; background-position: left center; background-size: cover;">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-8">
        <h1 id="heading">Have your own motorcycle? Want to be your own boss?</h1>
        <div id="answers">
          <ul class="ul_answer">
            <li><i class="far fa-clock "></i>Work whenever you are free</li>
            <li><i class="fas fa-money-check-alt "></i>Make enough money</li>
            <li><i class="fas fas fa-handshake "></i>Share your ride</li>
          </ul>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="form">
          <h4 id="sign-up">Sing up with GOMO</h4>
          <form action="" method="post">
            <div class="form-group">
              <label for="exampleFormControlInput1">Your Name</label>
              <input type="text" class="form-control input-lg" id="exampleFormControlInput1" name="rider_name">
            </div>
            <div class="form-group">
              <label for="exampleFormControlInput1">Your Phone Number</label>
              <input type="text" class="form-control input-lg" id="exampleFormControlInput1" name="rider_mobile">
            </div>
            <div class="form-group">
              <label for="inputState">Vehicle Type</label>
              <select id="inputState" class="form-control input-lg" name="vehicle_type" required>
                <option selected value="Car">Car</option>
                <option value="Bick">Bick</option>
                <option value="Bicyclek">Bicycle</option>
              </select>
            </div>
            <div id="submit_button" class="btn-group btn-group-justified">
              <div class="btn-group btn-group-lg">
                <button id="home_submit" type="submit" class="btn btn-default">SEND</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

我需要使用 jquery 更改 .slide 类中的背景图片 url。我的 HTML 代码如下所示。它看起来像https://pathao.com 主页滑块。

【问题讨论】：

请向我们展示您的尝试，*** 不是编码服务。

***.com/questions/554273/…

【参考方案1】：

使用onscroll 函数更改滚动上的 img（如您附加的网站链接中） 在这里设置window.pageYOffset > 60你想要的任何数字

window.onscroll = function() 
    var img1 = document.getElementById('img1');
    var img2 = document.getElementById('img2')
    if ( window.pageYOffset > 60 ) 
 document.getElementById("img1").src = "https://material.angular.io/assets/img/examples/shiba2.jpg";
     else 
 document.getElementById("img1").src = "https://material.angular.io/assets/img/examples/shiba1.jpg";
    

.rightPhotos

    max-width: 50%;
    height:50%;

    overflow: auto;

.aPhoto


    max-height: 100%;






.images

    width: 100%;
    height: 500px;

      <div class="other">
         <div class="rightPhotos" onscroll="myFunction()">
           <div class="aPhoto">
               <img class ="images" id="img1" src="https://material.angular.io/assets/img/examples/shiba1.jpg"  />
   </div>

  </div>

 </div>

【讨论】：

告诉我更多帮助

这不是我的问题，我需要动态更改背景图片 url。它应该像幻灯片放映。看看这个网站主页滑块。 pathao.com

我没有解释你想要什么......我将链接显示在滚动图像更改上，所以请......

【参考方案2】：

如果您希望保持线性渐变，这将起到作用。另外，我认为您想要某种事件，这会发生。我错了吗？

let imageList = ['myImage1.jpg', 'myImage2.jpg'];
let index = 0;
function cycleImages() 
    setInterval(function() 

       $('.slide').css("background-image", "linear-gradient(60deg,#224455,rgba(255, 186, 22, 0.5)), url(" + imageList[index] + ")"); 

       if(index === imageList.length) 
          index = 0;
       
       else 
          index += 1;
       
, 10000)

【讨论】：

这个方法是正确的。我需要动态地做。我是 jquery 的新手。你能帮我吗

@SanjayaPrasanna 我编辑了答案，但这仍然是一个例子。正如你可能猜到的，一个数组包含了你的图片的路径，剩下的就很简单了 js

@Leo Odishvili。我收到了这个错误“Uncaught SyntaxError: Unexpected end of input”

是的，抱歉，忘记了一个括号。立即尝试

Odishivili 现在我在“flet imageList = ['localhost/commercial/gomo/img/section02-background.png', 'localhost/commercial/gomo/img/section01-background.png'];”中得到了这个错误“Uncaught SyntaxError: Unexpected identifier”这一行