jQuery的CSS背景图片幻灯片与转换效果 [英] jquery css background image slideshow with transtion effect
本文介绍了jQuery的CSS背景图片幻灯片与转换效果的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要为以下简单的sideshow的更改添加一些不错的转换淡化效果：
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，]; var i = 0; var div; $（function（）{div = $（'。header_summer'）; console.log（loaded）; setTimeout（changeBack，1000）;}）;函数changeBack（）{i = ++ i％images.length; if（i> images.length）{i = 0; } console.log（'url（'+ images [i] +'）;'）; // div.css（'background-image'，url（'+ images [i] +'））; （），$（this）.remove（）; $（'。'）。 （''+ images [i] +'）no-repeat 0px 0px'）;}）; // setTimeout（changeBack，5000）; }
.header_summer {background：url（'../ tpl / mblmhv1 / images / summer_cover1.jpg'）no-repeat 0px 0px; background-size：cover;最小高度：920px; / * 800px; * / / * TRANSISITION - 不要在这里过渡（背景图像0.5s缓出）;过渡：不透明1s缓和; -webkit-transition：不透明度1s缓和; -moz-transition：不透明度1s缓和; -o-transition：不透明度1s缓和; * /}
< script src =https：/ /code.jquery.com/jquery-2.1.4.js\"></script>
我已经尝试将.fadeIn（）添加到更改图像的jquery行，以及CSS中的过渡效果 - 我缺少什么？
解决方案
它应该只与
.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; -webkit-transition：1s缓和; -moz-transition：1s缓和; -o-transition：1s缓和; transition：1s ease-in-out;}
< ！DOCTYPE html>< html>< head> < meta charset =utf-8> < meta name =viewportcontent =width = device-width> < title>鲜花和东西...< / title>< / head>< body> <！ - 要切换的元素 - > < div class ='header_summer'>< / div> < script src =https://code.jquery.com/jquery-2.1.4.js>< / script> <脚本> //定义你的图片var images = [http://static1.squarespace.com/static/550b669de4b0d91b0f49935d/t/551b6575e4b0c2174c3a6f54/1427858806833/flowers.jpg?format=1500w，http://cimages.prvd.com/是/ 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，]; //定义你的变量var i = 0; var div; $（function（）{//设置div div = $（'。header_summer'）; console.log（loaded）; setTimeout（changeBack，1000）;}）;函数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）; $ lt; / script>< / body>< / html>
I need to add some nice transition fade effect to the change of the following simple sideshow:
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",
];
var i = 0;
var div;
$(function() {
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] + "')");
// preload image check
//
$('<img/>').attr('src', images[i]).load(function()
{
$(this).remove();
$('.header_summer').css('background', 'url("' + images[i] +'") no-repeat 0px 0px');
});
//
setTimeout(changeBack, 5000);
}
.header_summer {
background: url('../tpl/mblmhv1/images/summer_cover1.jpg') no-repeat 0px 0px;
background-size: cover;
min-height:920px; /* 800px; */
/* TRANSISITION - not qorking here
transition(background-image 0.5s ease-in-out);
transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
*/
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<div class='header_summer'></div>
I have tried appending .fadeIn() to the jquery line that changes the image, and transition effects in the CSS - what am I missing?
解决方案
It should work with just the transition property defined on your CSS class as any changes to the element should trigger the transition (i.e. when you update the background, you should see the transition):
.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;
/* Transitions and their cross-browser friends */
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
The syntax generally uses the form <property> <duration> <timing-function> <delay>, so your current transition would be looking for the opacity property to change, which it doesn't seem to be.
You should consider using background instead :
transition: background 1s ease-in-out;
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
Example
.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;
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
<!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>
这篇关于jQuery的CSS背景图片幻灯片与转换效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
