Добавление подписей к простому слайд-шоу

Question

Добавление подписей к простому слайд-шоу

0

Я использовал простой слайд-шоу jquery, который я нашел в Интернете, чтобы получить следующее:

HTML:

<div class="fadein">
 <img src="1.jpg" width="580" height="360">
 <img src="2.jpg" width="580" height="360">
 <img src="3.jpg" width="580" height="360">
</div>

CSS:

body {font-family:Arial, Helvetica, sans-serif; font-size:12px;}

.fadein { position:relative; width:580px; height:360px; }
.fadein img { position:absolute; left:0; top:0; }
.fadein img {
  box-shadow: 0 0 4px #666;
  -moz-box-shadow: 0 0 4px #666;
  -webkit-box-shadow: 0 0 4px #666;
  -o-box-shadow: 0 0 4px #666;
  -ms-box-shadow: 0 0 4px #666;
}

JavaScript:

$(function(){
  $('.fadein img:gt(0)').hide();
    setInterval(function(){
      $('.fadein :first-child').fadeOut()
        .next('img').fadeIn()
        .end().appendTo('.fadein');}, 
      4000);
  });

Я понял, как добавить тень окна к изображениям. Я хочу добавить полупрозрачные подписи к каждому изображению. Как мне это сделать?

user3216651 20 янв. 2014, в 21:32

Источник

Теги:

jquery

slideshow

2 ответа

Ещё вопросы

hsobhy · Answer 1 · 2014-01-20T18-09-00.000Z

Рабочий пример для вашего кода

Пример на скрипке

CSS

body {font-family:Arial, Helvetica, sans-serif; font-size:12px;}

.fadein { position:relative; width:580px; height:360px; }
.fadein div.slide { position:absolute; left:0; top:0; width:580px; height:360px;}
.fadein div.slide {
box-shadow: 0 0 4px #666;
-moz-box-shadow: 0 0 4px #666;
-webkit-box-shadow: 0 0 4px #666;
-o-box-shadow: 0 0 4px #666;
-ms-box-shadow: 0 0 4px #666;
}
div.slide img {
position:absolute;  z-index:1;}
div.slide h2 {
position:absolute; top:20px; z-index:2; margin:0; padding:0; font-size:2em; background:rgba(32, 34, 38, .4); line-height:2.1em; font-weight:normal; color:#ffffff; margin-bottom:2px; clear:both; padding:1px 7px; float:none;
}

Javascript

$(function () {
    $('.fadein .slide:gt(0)').hide();
    setInterval(function () {
        $('.fadein .slide:first-child').fadeOut()
     .next('.slide').fadeIn()
     .end().appendTo('.fadein');
    },
  4000);
});

HTML

<div class="fadein">

    <div class="slide"><img src="http://www.wallpaper4me.com/images/wallpapers/lifethroughdew-766931.jpeg" width="580" height="360" /><h2>The first Pic</h2></div>
    <div class="slide"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT698nzLZwHByltzr9IoJNbTjyJ7mHeHPgBsJP159GdjAPHT22A" width="580" height="360" /><h2>Here is the Second photo </h2></div>
    <div class="slide"><img src="http://www.gurucareersnetwork.com/wp-content/uploads/2013/03/Google-Tel-Aviv-Office-Flower-Pots.jpg" width="580" height="360" /><h2>last</h2></div>

</div>

Ian Ryan Clarke · Answer 2 · 2014-01-20T17-56-00.000Z

Вы ищете что-то вроде этого?:

http://www.queness.com/post/152/simple-jquery-image-slide-show-with-semi-transparent-caption

Или обновленный

http://www.queness.com/post/1450/jquery-photo-slide-show-with-slick-caption-tutorial-revisited

На обновленном код испорчен, я думаю, я не мог понять это ..