Скрипт плавной смены background-image в div
Очень нужен скрипт скрипт плавной смены background-image в div.
Найти нигде не удалось. Если кто-нибудь знает как это можно сделать(если это вообще возможно), огромная просьба помочь )) |
Что есть "плавная смена"? Как она выглядит?
|
Самая обычная смена картинок(прозрачность плавно меняется)
|
Вам нужно при клике или просто через время?
Через анимейт пробовали? Пример:
$('.img').animate({'opacity':'0'},600,function(){
$(this).css('background-image':'url(image2.jpg)');
$(this).animate({'opacity':'1'},600);
});
|
Цитата:
Советую просто погуглить jquery slider или jqyery carousel, наверняка найдется что то подходящее. Например http://jquery.malsup.com/cycle/ там сразу демо с разными эффектами, в том числе и "затухания" |
hfts_rider,
Просто через время. Спасибо, подскажите, пожалуйста,а как сделать смену нескольких картинок и прицепить этот код к диву? krasovsky,Слайдер не подойдет у меня уже готова верстка и меняться должна именно фоновая картинка, а во всех слайдерах картинки картинками, а не фоном. Проблема в том , что я на джава скрипт умею делать только самые просты вещи. Это не заню как реализовать. |
(не забудь подключить jquery)
1) .csa-head = тот самый див с классом "csa-head" 2) imgHead = массив картинок, сюда впиши их расположение. 3) Где значения "200" это скорость появления и затухания. 4) Где значение "8000", это интервал через какой оно будет изменяться (8000 - это 8 секунд)
var imgHead = [
'images/imgCsaHead/img.jpg',
'images/imgCsaHead/img1.jpg',
'images/imgCsaHead/img2.jpg',
'images/imgCsaHead/img3.jpg'
], i=1;
function csaHead(){
if(i > (imgHead.length-1)){
$('.csa-head').animate({'opacity':'0'},200,function(){
i=1;
$('.csa-head').css({'background':'url('+imgHead[0]+')'});
});
$('.csa-head').animate({'opacity':'1'},200);
}else{
$('.csa-head').animate({'opacity':'0'},200,function(){
$('.csa-head').css({'background':'url('+imgHead[i]+')'});
i++;
});
$('.csa-head').animate({'opacity':'1'},200);
}
}
var intervalCsaHead = setInterval(csaHead,8000);
|
hfts_rider,
Огромное-преогромное спасибо!!! Все получилось. Остался один вопрос, их можно остановить после первого круга? Т.е. все картинки прошли и на последней остановилась анимация. |
Нужно просто остановить таймер.
var imgHead = [
'images/imgCsaHead/img.jpg',
'images/imgCsaHead/img1.jpg',
'images/imgCsaHead/img2.jpg',
'images/imgCsaHead/img3.jpg'
], i=1;
function csaHead(){
/* CSA head */
if(i > (imgHead.length-1)){
clearInterval(intervalCsaHead); // Остановка таймера
}else{
$('.csa-head').animate({'opacity':'0'},200,function(){
$('.csa-head').css({'background':'url('+imgHead[i]+')'});
i++;
});
$('.csa-head').animate({'opacity':'1'},200);
}
}
var intervalCsaHead = setInterval(csaHead,8000);
|
hfts_rider,
Спасибо!!!! |
Цитата:
|
Цитата:
|
Цитата:
Подключаю: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> Что должно быть в div ? Может так: <div class="csa-head"><script> csaHead(); </script></div> |
egor8,
$(function() {
//сюда весь код из примера
});
|
<style>
.csa-head {width:300px;
height:150px;
background: url("http://javascript.ru/cat/list/mobile.jpg");
}
</style>
<div class="csa-head"></div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
var imgHead = [
'http://javascript.ru/cat/list/donkey.gif',
'http://javascript.ru/cat/list/js.gif',
'http://javascript.ru/cat/list/project.jpg',
'http://javascript.ru/cat/list/appscript.png'
], i=1;
function csaHead(){
/* CSA head */
if(i > (imgHead.length-1)){
i = 0;
//clearInterval(intervalCsaHead); // Остановка таймера
}
$('.csa-head').animate({'opacity':'0'},1000,function(){
$('.csa-head').css({'background':'url('+imgHead[i]+')'});
i++;
});
$('.csa-head').animate({'opacity':'1'},1000);
}
var intervalCsaHead = setInterval(csaHead,3000);
</script>
|
Ребята у меня задача стоит просто, помогите...
Есть картинка в шапке logo.gif анимашка небольшая, после того как она отработает, на место неё должна встать другая статичная картинка logo_light.png. И только после перегрузки браузера, снова все повторяется. Пишу по аналогии поста, не срабатывает:
<style>
.csa-head {width:140px; height:150px; background: url("logo.gif");}
</style>
<div class="csa-head"></div>
Картинки лежат в этой же папке, где и код
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
var imgHead = [
'logo_light.png'
], i=1;
function csaHead(){
/* CSA head */
if(i > (imgHead.length-1)){
clearInterval(intervalCsaHead); // Остановка таймера
}else{
$('.csa-head').animate({'opacity':'0'},200,function(){
$('.csa-head').css({'background':'url('+imgHead[i]+')'});
i++;
});
$('.csa-head').animate({'opacity':'1'},200);
}
}
var intervalCsaHead = setInterval(csaHead,8000);
</script>
|
egor8,
<script>
$(function() {
$('.csa-head').delay(8000).animate({'opacity':'0'},200,function(){
$('.csa-head').css({'background':'url(logo_light.png)'}).animate({'opacity':'1'},200);
});
});
</script>
|
Все отлично! И еще письма почему-то не приходят на почту, приходится сюда смотреть самому. Хотя подписка есть.
|
Ребята подскажите! Как подключить к новым элементам
<style>
.csa-head {
background: url("/images/new/foto_index/IMG_1255-Panorama.jpg") no-repeat center;
z-index: 0;
min-height: 600px;
margin-top: -50px;
margin-right: 0;
margin-left: 0;
-moz-background-size: 100%; /* Firefox 3.6+ */
-webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
-o-background-size: 100%; /* Opera 9.6+ */
background-size: 100%; /* Современные браузеры */
display: block;
background-size:cover;
}
</style>
background: url меняется через скрипт, но теряется все остальные данные, как их закрепить? |
Как закрепить CSS стиль ? почему-то меняется CSS после смены фона!
|
macik,
:-? |
Я что то спросил не так?
|
Цитата:
возможно, нужно исключить из скрипта и css, использование background:, а разбить всё на составляющие , типа background-image background-repeat и т.д. |
Цитата:
я сделал так.
<script>
var mas = [
'/images/new/foto_index/01.jpg',
'/images/new/foto_index/IMG_0875.jpg',
'/images/new/foto_index/IMG_0985.jpg'
], i=1;
function csaHead(){
if(i > (mas.length-1)){
$('#foto_index').animate({'opacity':'0'},500,function(){
document.getElementById('foto_index').style.backgroundImage="url('"+mas[0]+"')"
});
$('#foto_index').animate({'opacity':'1'},500);
}else{
$('#foto_index').animate({'opacity':'0'},500,function(){
document.getElementById('foto_index').style.backgroundImage="url('"+mas[i]+"')"
i++;
});
$('#foto_index').animate({'opacity':'1'},500);
}
}
var intervalCsaHead = setInterval(csaHead,8000);
</script>
у foto_index такие данные:
#foto_index{
background: url("/images/new/foto_index/01.jpg") no-repeat center;
z-index: -1;
min-height: 600px;
margin-top: -50px;
margin-right: 0;
margin-left: 0;
-moz-background-size: 100%; /* Firefox 3.6+ */
-webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
-o-background-size: 100%; /* Opera 9.6+ */
background-size: 100%; /* Современные браузеры */
background-size:cover;
}
Но есть одно но! есть элемент надо этим дивом и вот когда картинка начинает исчезать и появляется то она перекрываете элемент меню который над ней ... Как заставить foto_index не менять свое положение z-index: вовремя анимации? |
Причину нашел. У меню индекс фиговый был ... :)
Анимация не нравится ... МОжете подсказать как сделать что бы картинки сменяли друг друга, а то получается что ФОН страницы сменяется на картинку и обратно ... |
macik,
z-index не менется ... но можно попробовать строка 20
$('#foto_index').css({"z-index" : -1}) }
|
Цитата:
|
Цитата:
Мне надо что бы картинка сменяла картинку ... как в этом шаблоне http://ironfit.ancorathemes.com или как тут на сайте http://tirol.org.ua в id="foto_01" |
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
или сразу смена картинок с opacity эффектом |
Цитата:
|
Ну Да там меняется так как надо в 14 посте. Но одна проблема img можно масштабировать? что бы так как в примере http://ironfit.ancorathemes.com
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.carousel{
width: 100%;
position: relative;
}
.carousel img{
position: absolute;
width: 100%;
height: auto;
opacity: 0;
border-radius: 8px;
box-sizing: border-box;
border: #8B4513 2px solid;
transition: opacity .8s ease-in;
}
.carousel img.show{
opacity: 1;
}
.carousel.vertical{
width: 170px;
height: 350px;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
[].forEach.call(document.querySelectorAll(".carousel"), function(el) {
var img = el.querySelectorAll("img"),
len = img.length,
i = len - 1,
p = el.dataset.pause || 5E3;
!function g() {
img[i].classList.remove("show");
i = ++i % len;
img[i].classList.add("show");
window.setTimeout(g, p)
}()
})
});
</script>
</head>
<body>
<div class="carousel" data-pause="3000">
<img src="http://img-fotki.yandex.ru/get/5640/35900228.10c/0_7388e_3ab59b4a_XL.jpeg.jpg" alt="">
<img src="http://1.bp.blogspot.com/-aleHkBUuqOI/VY0HrCytsXI/AAAAAAAAq1g/f2emGtdqdWo/s640/2015-06-05_0145.jpg" alt="">
<img src="http://www.fotki.ykt.ru/albums/userpics/2013/11-18/1384739526_image.jpg" alt="">
</div>
</body>
</html>
|
Я удивляюсь вашей голове ... Как вы просто меняете код и добиваетесь эффекта ...
Я наверно неправильно объясняю ... В шаблоне, картинка спортсменов меняется так так и в вашем примере, но масштабирование таи хитрое, оно имеет max-height, а вот по горизонтали всегда 100%. Я так понимаю что это нельзя давится с IMG? |
Цитата:
|
Цитата:
|
<style type="text/css">
*{transition:all 3s ease;}
</style>
<script>
var mas = [
'/images/new/foto_index/01.jpg',
'/images/new/foto_index/IMG_0875.jpg',
'/images/new/foto_index/IMG_0985.jpg'
], i=1;
function csaHead(){
if(i > (mas.length-1)){
document.getElementById('foto_index').style.backgroundImage="url('"+mas[0]+"')";
i=0;
}else{
document.getElementById('foto_index').style.backgroundImage="url('"+mas[i]+"')";
i++;
}
}
var intervalCsaHead = setInterval(csaHead,5000);
</script>
Вот что у меня получилось ... Без IMG а просто div |
Обнаружил, что не успевает загружать картинки ... Скрипт работает а картинок нет ... Только на второй проход все картинки отображаются.
Подскажите, как проконтролировать загрузку картинок? |
| Часовой пояс GMT +3, время: 23:18. |