jquery not changing css background-image property
Question
I am trying to make a simple slideshow that changes the css background-image using JQuery .
Fiddle: http://jsbin.com/xinihokuso/edit?js,console
var images = [ "http://static1.squarespace.com/static/550b669de4b0d91b0f49935d/t/551b6575e4b0c2174c3a6f54/1427858806833/flowers.jpg?format=1500w", "http://cimages.prvd.com/is/image/ProvideCommerce/PF_15_R105_MINIMAL_VA0211_W1_SQ?$PFCProductImage$", "http://media02.hongkiat.com/ww-flower-wallpapers/purplecrocus.jpg", "http://www.ninthstreetflowers.com/smp/Smp1/images/flower4.jpg", "http://magic-spells-and-potions.com/images/flower-language-vertical.png", ]; var i = 0; var div = $('.header_summer'); $(document).ready(function() { console.log("loaded"); setTimeout(changeBack, 1000); }); function changeBack() { i = i = ++i % images.length; if (i > images.length) { i = 0; } console.log('url(' + images[i] + ') no-repeat 0 0;'); div.css('background', 'url(' + images[i] + ') no-repeat 0 0;'); setTimeout(changeBack, 5000); }
<div class="header_summer"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <style type="text/css"> .header_summer { background: url('http://static1.squarespace.com/static/550b669de4b0d91b0f49935d/t/551b6575e4b0c2174c3a6f54/1427858806833/flowers.jpg?format=1500w') no-repeat 0 0; background-size: cover; min-height: 920px; /* 800px; */ } </style>
Everything looks right, the console is showing the correct CSS background-image value on each cycle, but all that is happening is the original image from the initial declared CSS is showing. Any ideas?
Please don't tell me to try to create unique CSS selectors for each image and simply change the style. That is not what I am trying to achieve here.
4 answers
solution1
2 2016-05-19 19:56:35
You are missing the class selector, it should be:
var div = $('.header_summer');
Also, background-image does not take that many parameters:
div.css('background-image', 'url("../tpl/mbmhv1/images/' + images[i] + '")');
Use background if you want parameters
Edit:
You need to add some css to your element
.header_summer {
width: 100%;
height: 100%;
position: absolute;
}
Fiddle: http://jsbin.com/zufekurapo/edit?output
var images = [ "http://static1.squarespace.com/static/550b669de4b0d91b0f49935d/t/551b6575e4b0c2174c3a6f54/1427858806833/flowers.jpg?format=1500w", "http://cimages.prvd.com/is/image/ProvideCommerce/PF_15_R105_MINIMAL_VA0211_W1_SQ?$PFCProductImage$", "http://media02.hongkiat.com/ww-flower-wallpapers/purplecrocus.jpg", "http://www.ninthstreetflowers.com/smp/Smp1/images/flower4.jpg", "http://magic-spells-and-potions.com/images/flower-language-vertical.png", ]; var i = 0; var div = $('.header_summer'); $(document).ready(function() { console.log("loaded"); setTimeout(changeBack, 1000); }); function changeBack() { i = i = ++i % images.length; if (i > images.length) { i = 0; } console.log(images[i]); div.css('background', 'url(\\''+images[i] + '\\') no-repeat'); setTimeout(changeBack, 2000); }
.header_summer { width: 100%; height: 100%; position: absolute; }
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-2.1.4.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="header_summer"></div> </body> </html>
solution2
2 ACCPTED 2016-05-19 20:13:52
You need to remove the semi-colon(;) after declaring the pixels.
div.css('background', 'url(' + images[i] + ') no-repeat 0px 0px');
Working example : https://jsfiddle.net/DinoMyte/ez8cgsx7/8/
solution3
1 2016-05-19 19:52:31
Check your selector and scope
If you want to target the element you provided in your example, your jQuery selector should include a . to indicate you are targeting an element with the class of "header_summer" :
var div = $(".header_summer");
Additionally, declaring this before your $(document).ready(){ ... }); block is going to cause some issues as jQuery will not be available at the time. Consider declaring your variable and then setting it within that function :
var div;
$(document).ready(function(){
div = $(".header_summer");
});
Simplify setting your background
Currently, you are attempting to set all kinds of other properties in addition to just background-image within your CSS call. If you want to do this, you should consider using background instead of background-image :
div.css("background", "url('" + images[i] + "') no-repeat 0px 0px");
or if you are using background-image then just set the background :
div.css("background", "url('" + images[i] + "')");
Putting it all together
.header_summer { background: url('http://static1.squarespace.com/static/550b669de4b0d91b0f49935d/t/551b6575e4b0c2174c3a6f54/1427858806833/flowers.jpg?format=1500w') no-repeat 0px 0px; background-size: cover; min-height: 920px; /* 800px; */ }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Flowers and stuff...</title> </head> <body> <!-- Your element to switch through --> <div class='header_summer'></div> <script src="https://code.jquery.com/jquery-2.1.4.js"></script> <script> // Define your images var images = [ "http://static1.squarespace.com/static/550b669de4b0d91b0f49935d/t/551b6575e4b0c2174c3a6f54/1427858806833/flowers.jpg?format=1500w", "http://cimages.prvd.com/is/image/ProvideCommerce/PF_15_R105_MINIMAL_VA0211_W1_SQ?$PFCProductImage$", "https://i.kinja-img.com/gawker-media/image/upload/s--8a-AXhau--/c_scale,fl_progressive,q_80,w_800/zec3un8rzcmblrdlyswb.jpg", "http://media02.hongkiat.com/ww-flower-wallpapers/purplecrocus.jpg", "http://www.ninthstreetflowers.com/smp/Smp1/images/flower4.jpg", "http://magic-spells-and-potions.com/images/flower-language-vertical.png", ]; // Define your variables var i = 0; var div; $(function() { // Set up your div div = $('.header_summer'); console.log("loaded"); setTimeout(changeBack, 1000); }); function changeBack() { i = ++i % images.length; if (i > images.length) { i = 0; } console.log('url("' + images[i] + '");'); div.css('background-image', "url('" + images[i] + "')"); setTimeout(changeBack, 5000); } </script> </body> </html>
solution4
0 2016-05-19 20:09:17
更改一行代码：
div.css('background-image', 'url(' + images[i] + ')').css('background-repeat','no-repeat').css('background-position','left top');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.