У меня есть div с классом с именем «слайдер», который содержит раздел (класс слайдер-текст) с некоторым текстом заголовка. В классе слайдера есть некоторые div с изображениями. Эти divs используются для создания слайд-шоу.Эффект затухания JQuery без скрытия другого содержимого
<body>
<div class="slider">
<section class="slider-text">
<h1>header</h1>
<p>Some header text</p>
</section>
<div>
<img src="images/Photography-Camera-HD-Wallpaper1.jpg">
</div>
<div>
<img src="images/Amazing-mountains-in-nature-Big-size-Wallpaper.jpg">
</div>
</div>
</body>
Следующий код css используется для того, чтобы полностью позиционировать ползунок в классе ползунка. Изображения берут полную ширину ползунка:
.slider {
position: relative;
text-align: center;
width: 100%;
height: 98vh;
}
.slider img {
max-width: 100%;
max-height: 100vh;
width: 100%;
height: 98vh;
}
.slider-text {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 50%;
height: 50%;
color: white;
}
Следующий код jquery используется для слайдера effecet. где один DIV с изображением исчезает, и другой исчезает в:
$(".slider > div:gt(0)").hide();
setInterval(function() {
$('.slider > div:first')
.fadeOut(1000)
.next('div')
.fadeIn(2000)
.end()
.appendTo('.slider');
}, 6000);
Но проблема в то время как изображение DIV исчезает из текста внутри класса «слайдер текста» также скрывается. И он появляется, когда следующий образ div затухает. Текст заголовка не должен скрываться, в то время как разделители изображений исчезают/сзади.
Текст должен виден между усилиями ползунок анимации, не так ли? –
, пожалуйста, предоставьте его финальную скрипку. Мне также нужно это –
, пожалуйста, проверьте эту скрипту https://jsfiddle.net/4y3krkmv/ –