0

$(function() {

  var index = 0
  // Все слайды.
    , slides = $('.mySlides');
        
  function carousel() {
    index++;
    if (index > slides.length - 1) {
      index = 0;
    }
    // Показать активный слайд за 1 сек.
    var active = slides.eq(index).animate({ opacity: 1 }, 1000);
    // Скрыть все слайды кроме активного за 1 сек.
    slides.not(active).animate({ opacity: 0 }, 1000);
  }

  // Запустить таймер.
  setInterval(carousel, 4000);
  
});
.mySlides {
	position: relative;
	height: 562px;
	width: 100%;
}
.slide2 {
	margin-top: -587px;
	opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow">
				<img src="http://cdn1-www.dogtime.com/assets/uploads/gallery/siberian-husky-dog-breed-pictures/siberian-husky-dog-breed-pictures-3.jpg" class="mySlides slide1" >
				<img src="https://www.pets4homes.co.uk/images/articles/2690/large/siberian-husky-hereditary-health-and-longevity-55078254b0b96.jpg" class="mySlides slide2">
			</div>

Всем привет как видите тут у меня простой слайдер с рекурсией на jquery.Подскажите как для каждой фотографии написать надпись.Чтобы когда фотография менялось надпись менялось с ним синхронно.

1 ответ 1

2

$(function() {

  var index = 0
  // Все слайды.
    , slides = $('.mySlides');
        
  function carousel() {
    index++;
    if (index > slides.length - 1) {
      index = 0;
    }
    // Показать активный слайд за 1 сек.
    var active = slides.eq(index).animate({ opacity: 1 }, 1000);
    // Скрыть все слайды кроме активного за 1 сек.
    slides.not(active).animate({ opacity: 0 }, 1000);
  }

  // Запустить таймер.
  setInterval(carousel, 4000);
  
});
.mySlides {
	position: relative;
	height: 562px;
	width: 100%;
}
.slide2 {
	margin-top: -587px;
	opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow">
				<div class="mySlides slide1"><img src="http://cdn1-www.dogtime.com/assets/uploads/gallery/siberian-husky-dog-breed-pictures/siberian-husky-dog-breed-pictures-3.jpg"></div>
				<div class="mySlides slide2"><img src="https://www.pets4homes.co.uk/images/articles/2690/large/siberian-husky-hereditary-health-and-longevity-55078254b0b96.jpg"><span>Текст</span></div>
			</div>

Т.е. добавить обертку каждой картинке и запихнуть в неё текст. А дальше стилизуйте надпись как хотите

1
  • понял спасибо большое
    – Randall
    23 мая 2017 в 19:22

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.