如何向幻灯片添加字幕

debugcn 发表于 Dev

226

我尝试了多种方法向幻灯片添加字幕，但没有。只想在每个图像的底部添加一个div，我应该更改脚本吗？还是应该添加其他内容？

HTML：

<div class="minislider">
     <img src="http://www.no-margin-for-errors.com/wp-content/themes/NMFE/images/fullscreen/1.jpg" />
     <img src="http://www.no-margin-for-errors.com/wp-content/themes/NMFE/images/fullscreen/2.jpg" />
     <img src="http://www.no-margin-for-errors.com/wp-content/themes/NMFE/images/fullscreen/3.jpg" />
     <img src="http://www.no-margin-for-errors.com/wp-content/themes/NMFE/images/fullscreen/4.jpg" />
</div>

CSS：

.minislider {
    width: 321px;
    height: 242px;
    background-color: #649696;
    position: relative;
    float: left;
    left: 76px;
    top: 11px;
    border-radius: 10px 10px 10px 10px;
}

.minislider img {
    width: 311px;
    height: 232px;
    position: absolute;
    left: 5px;
    top: 5px;
}

JQUERY：

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

http://jsfiddle.net/pedram68/tntpQ/

需要改进

就像Putvande所说的那样，您必须将图像和标题包装在div中，然后只需要稍微编辑一下jQuery：

$(document).ready(function (){
    $('.minislider>div:gt(0)').hide(); //".minislider>div" instead of ".minislider div" in case you were planning on putting a div inside your div.
    setInterval(function(){
        $('.minislider>div:first-child').fadeOut()
            .next('div').fadeIn()
            .end().appendTo('.minislider');
        }, 3000);
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。