Как добавить текст по отдельным изображениям в слайд-шоу

0

Я бы создал контейнер вокруг изображений, поместите его, а position: relativeзатем добавьте элемент, который находится absoluteв нем, который накладывает текст.

var $frame = $('#frame');
           
        setInterval( function() {
                  var slides = $('.slide');
                  slides.first().appendTo($frame);
}, 3000);
body { background-color: #ddd;}
#slideshow {
  position: relative;
  background-color: #ccc;
  border: 1px solid #555;
  border-top: none;
  box-shadow: 0 1px 9px #222;
  width: 60%;
  margin: 50px auto;
}
#frame {
  position: relative;
  background-color: transparent;
  width: 100%;
        margin: 0 auto;
}
.slide:first-child {
  display: block;
  width: 100%;  
}
.slide img {
  width: 100%;
  display: block;
  max-width: 960px;
  height: auto;
  margin: 0 auto;
}
.slide:not(:first-child) {
  display: none;
}
.text {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.5);
  color: white;
  margin: 0;
  padding: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow">
  <div id="frame">
    <div class="slide"><img src="http://placehold.it/350x150/ffffff/f0265b&text=1">
      <p class="text">foo</p>
    </div>
    <div class="slide"><img src="http://placehold.it/350x150/ffffff/f0265b&text=2">
      <p class="text">foo</p>
    </div>
    <div class="slide"><img src="http://placehold.it/350x150/ffffff/f0265b&text=3">
      <p class="text">foo</p>
    </div>
  </div>
</div>

0

Попробуйте обернуть изображения в div, который содержит изображение (возможно, как фона) и титры. Затем сдвиньте div вместо изображения.

0

Проверь это:

var $frame = $('#frame');
           
        setInterval( function() {
                  var slides = $('.slide');
                  slides.first().appendTo($frame);
}, 3000);
body { background-color: #ddd;}
#slideshow {
  position: relative;
  background-color: #ccc;
  border: 1px solid #555;
  border-top: none;
  box-shadow: 0 1px 9px #222;
  width: 60%;
  margin: 50px auto;
}
#frame {
  position: relative;
  background-color: transparent;
  width: 100%;
        margin: 0 auto;
}
.slide {
  position:relative;
}
.slide:first-child ,.slide > img{
  display: block;
  width: 100%;
  max-width: 960px;
  height: auto;
  margin: 0 auto;
}
.slide:not(:first-child) {
  display: none;
}

.slide > div {
  position:absolute;
  padding:10px;
  background:rgba(0,0,0,.2);
  font-family:helvetica,tahome,serif;
  font-size:18px;
  bottom:0;
  left:0;
  right:0
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow">
  <div id="frame">
    <div class="slide" >
      <div>
        Eaxmple Text for Slide No.1
      </div>
     <img  src="http://placehold.it/350x150/ffffff/f0265b&text=1">
    </div>
    <div class="slide" >
      <div>
        Eaxmple Text for Slide No.2
      </div>
     <img src="http://placehold.it/350x150/ffffff/47d1c0&text=2">
    </div>
    <div class="slide">
      <div>
        Eaxmple Text for Slide No.3
      </div>
      <img src="http://placehold.it/350x150/ffffff/006400&text=3">
    </div>
  </div>
</div>

JQuery, HTML, CSS, слайд-шоу,

jquery,html,css,slideshow,

0

Ответов: 3

0

Я бы создал контейнер вокруг изображений, поместите его, а position: relativeзатем добавьте элемент, который находится absoluteв нем, который накладывает текст.

var $frame = $('#frame');
           
        setInterval( function() {
                  var slides = $('.slide');
                  slides.first().appendTo($frame);
}, 3000);
body { background-color: #ddd;}
#slideshow {
  position: relative;
  background-color: #ccc;
  border: 1px solid #555;
  border-top: none;
  box-shadow: 0 1px 9px #222;
  width: 60%;
  margin: 50px auto;
}
#frame {
  position: relative;
  background-color: transparent;
  width: 100%;
        margin: 0 auto;
}
.slide:first-child {
  display: block;
  width: 100%;  
}
.slide img {
  width: 100%;
  display: block;
  max-width: 960px;
  height: auto;
  margin: 0 auto;
}
.slide:not(:first-child) {
  display: none;
}
.text {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.5);
  color: white;
  margin: 0;
  padding: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow">
  <div id="frame">
    <div class="slide"><img src="http://placehold.it/350x150/ffffff/f0265b&text=1">
      <p class="text">foo</p>
    </div>
    <div class="slide"><img src="http://placehold.it/350x150/ffffff/f0265b&text=2">
      <p class="text">foo</p>
    </div>
    <div class="slide"><img src="http://placehold.it/350x150/ffffff/f0265b&text=3">
      <p class="text">foo</p>
    </div>
  </div>
</div>

0

Попробуйте обернуть изображения в div, который содержит изображение (возможно, как фона) и титры. Затем сдвиньте div вместо изображения.

0

Проверь это:

var $frame = $('#frame');
           
        setInterval( function() {
                  var slides = $('.slide');
                  slides.first().appendTo($frame);
}, 3000);
body { background-color: #ddd;}
#slideshow {
  position: relative;
  background-color: #ccc;
  border: 1px solid #555;
  border-top: none;
  box-shadow: 0 1px 9px #222;
  width: 60%;
  margin: 50px auto;
}
#frame {
  position: relative;
  background-color: transparent;
  width: 100%;
        margin: 0 auto;
}
.slide {
  position:relative;
}
.slide:first-child ,.slide > img{
  display: block;
  width: 100%;
  max-width: 960px;
  height: auto;
  margin: 0 auto;
}
.slide:not(:first-child) {
  display: none;
}

.slide > div {
  position:absolute;
  padding:10px;
  background:rgba(0,0,0,.2);
  font-family:helvetica,tahome,serif;
  font-size:18px;
  bottom:0;
  left:0;
  right:0
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow">
  <div id="frame">
    <div class="slide" >
      <div>
        Eaxmple Text for Slide No.1
      </div>
     <img  src="http://placehold.it/350x150/ffffff/f0265b&text=1">
    </div>
    <div class="slide" >
      <div>
        Eaxmple Text for Slide No.2
      </div>
     <img src="http://placehold.it/350x150/ffffff/47d1c0&text=2">
    </div>
    <div class="slide">
      <div>
        Eaxmple Text for Slide No.3
      </div>
      <img src="http://placehold.it/350x150/ffffff/006400&text=3">
    </div>
  </div>
</div>

JQuery, HTML, CSS, слайд-шоу,
Похожие вопросы
Яндекс.Метрика