Блог

Главная - Вопросы по программированию - слайд-шоу с использованием перекрывающихся прозрачных изображений

слайд-шоу с использованием перекрывающихся прозрачных изображений

#javascript #jquery #css

#javascript #jquery #css

Вопрос:

Я рассмотрел очень полезные предложения по css для обработки множества точно перекрывающихся прозрачных изображений, размещенных на непрозрачном изображении (в моем случае, карте, но не карте типа Google, просто линейный рисунок). Может ли кто-нибудь помочь мне превратить это в слайд-шоу? Я хочу постепенно накладывать изображения друг на друга, чтобы пользователь видел накопление визуальной информации.

Комментарии:

1. Похоже, для этого потребуется JavaScript. Я отмечаю этим ваш вопрос. Я также предполагаю, что вы не возражаете против использования jQuery, поэтому я также помечаю его этим.

Ответ №1:

Вот очень упрощенная реализация:http://jsfiddle.net/r7B4n

JavaScript:

 $('#showNext').click(function(e){
    e.stopPropagation();
    $('#slideShow li:hidden:first').fadeIn();
});

CSS:

 #slideShow {
    position: relative;
    width: 300px;
    height: 200px;
    border: 1px solid #444;
    list-style: none;
    margin: 0;
    padding: 0;
    background: url(http://dummyimage.com/300x200/ccc/fff)
}
#slideShow li {
    position: absolute;
    left: 0; top: 0;
    display: none
}

HTML:

 <ul id="slideShow">
    <li><img src="http://i.stack.imgur.com/hCTLO.png" /></li>
    <li><img src="http://i.stack.imgur.com/Zm25l.png" /></li>
    <li><img src="http://i.stack.imgur.com/3Rtc5.png" /></li>
    <li><img src="http://i.stack.imgur.com/cg3MF.png" /></li>
</ul>
<a href="#" id="showNext">Show next image</a>