使用jquery更改背景图像url
使用jquery更改背景图像url
提问于 2018-05-28 19:54:35
我需要使用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主页滑块。
回答 2
Stack Overflow用户
发布于 2018-05-28 20:02:43
使用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" alt="Woman with Sunglasses"/>
</div>
</div>
</div>
Stack Overflow用户
发布于 2018-05-28 20:06:12
如果你想保持线性梯度，这将会有一个技巧。此外，我认为你想要某种事件，在这种事件上会发生这种情况。我说错了吗？
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)
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50565848
复制相关文章
相似问题