Question

我在HTML，CSS和Jquery的帮助下制作了一个滑块，但我想在滑块的特定图像上写一个文本。我非常努力地添加文本，但文本开始出现在所有图像中。

这是我的Jquery：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function ($) {

   var imgFirst = $('#img-grp-wrap .img-wrap img');
$('#img-grp-wrap .img-wrap img:gt(0)').hide();

var rotate = setInterval(function() {
    slideShow();
}, 4000);

$('#img-grp-wrap .prev, #img-grp-wrap .next').hover(function() {
    clearInterval(rotate);
}, function() {
    rotate = setInterval(function() {
        slideShow();
    }, 4000);
});

$('#img-grp-wrap .next').click(function() {
    imgFirst.filter(":first-child") 
    .stop().fadeOut().next().fadeIn().end().appendTo('.img-wrap');
});

$('#img-grp-wrap .prev').click(function() {
    imgFirst.filter(":first-child").stop().fadeOut();
    $('#img-grp-wrap .img-wrap img:last-child').prependTo('.img-wrap').fadeOut();
    imgFirst.filter(":first-child").fadeIn();
});

function slideShow() {
    imgFirst.filter(":first-child").fadeOut().next('img').fadeIn().end().appendTo('.img-wrap');
}

});
</script>

这是我的CSS

 <style>#img-grp-wrap {
    position: relative;
    width: 1200px;
    height: 180px;
    margin: 100px auto;
}

.img-wrap {
    position: relative;
    border: 1px solid #CCC;
    width: 1200px;
    height: 610px;
}

.img-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    -moz-box-shadow: 1px 1px 4px #CCC;
    padding: 10px;
}

.next, .prev {
    position: absolute;
    cursor: pointer;
    top: 300px;
}

.next {
    right: 0px;
}

.prev {
    left: 20px;
}
.resize {
    width: 1200px;
    height: 600;
}

.resize {
    width: 1200px;
    height: 600;
}</style>

这是我的HTML

<div class="img-wrap">

    <img class="resize" src="http://dimsemenov.com/plugins/royal-slider/img/home.jpg" />

    <img class="resize" src="http://dimsemenov.com/plugins/royal-slider/img/previews/home/content-slider.jpg" />
    <img class="resize" src="http://dimsemenov.com/plugins/royal-slider/img/previews/home/video-gallery.jpg" />

</div>   


<img src="http://annhowardesign.com/images/arrowright.jpg" class="next" alt="Next"/> 
<img src="http://annhowardesign.com/images/arrowleft.jpg" class="prev" alt="Previous"/>

Answer 1

根据您的html标记，所有图片都可以使用任何文字。所以你必须用其他一些html标签来包装它。

<div class="img-wrap">
    <div class='img'>
       <img class="resize" src="...royal-slider/img/home.jpg" />
       <h3>First image text.</h3>
    </div>
    <div class='img'>
       <img class="resize" src="...royal-slider/.../content-slider.jpg" />
       <h3>Second image text.</h3>
    </div>
    ....and so on....
</div>

所以在你的css中你必须将h3's z-index属性设置为更高的绝对定位元素。

注意：

虽然还有其他几种方法，但你必须确保你的演示小提琴有效。

Answer 2

我已经使用HTML和CSS所需的标记更新了Fiddle。相应地更改JS。不需要太多时间弄清楚需要什么。

<div class="img-wrap">
  <ul>
   <li class="slider-content first">
       <img class="resize" src="http://dimsemenov.com/plugins/royal-slider/img/home.jpg" />
       <h2> This is the first picture</h2>
   </li>

    <li class="slider-content">
        <img class="resize" src="http://dimsemenov.com/plugins/royal-slider/img/previews/home/content-slider.jpg" />
    </li>

    <li class="slider-content">
        <img class="resize" src="http://dimsemenov.com/plugins/royal-slider/img/previews/home/video-gallery.jpg" />
      </li>
    </ul>
</div>

CSS

.img-wrap .slider-content.first h2{
    position: absolute;
    top:10px;
    left:10px;
    z-index:1;
    color:white;
}

UPDATED FIDDLE WITH MARKUP

我想知道如何在滑块中的特定图像上添加文本

2 个答案:

注意：