如何在幻灯片中的单独图像上添加文本

Question

我正在学习jQuery，我一直在玩不同的幻灯片，试图添加文字和效果。

我一直在使用这个codepen作为模板，但是当我在图像上添加文本时，它不会流畅地滑动，只是弄乱我的幻灯片并打破它。我有三个不同的图像，并希望每个图像都有不同的引号。

https://codepen.io/pawluczkowycz/pen/emymwa

 ``<div id="slideshow">
  <div id="frame">
    <img class="slide" src="http://placehold.it/350x150/ffffff/f0265b&text=1">
    <img class="slide" src="http://placehold.it/350x150/ffffff/47d1c0&text=2">
    <img class="slide" src="http://placehold.it/350x150/ffffff/006400&text=3">
  </div>
</div>

任何人都有解决方案吗？

Answer 1

我会在图片周围创建一个容器，用position: relative定位它，然后添加一个absolute位于其中的元素，覆盖你的文字。

＆＃13;

＆＃13;

var $frame = $('#frame');
	   
	setInterval( function() {
		  var slides = $('.slide');
		  slides.first().appendTo($frame);
}, 3000);

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试将图像包装在包含图像（可能是背景）和字幕的div中。 然后滑动div而不是图像。

Answer 3

检查一下：

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>