Исчезать изображения на веб-странице - PullRequest
Новая
       6

Исчезать изображения на веб-странице

1 голос
/ 26 августа 2011

Я хочу создать карусель изображений, запускаемых нажатием, например, если вы нажмете кнопку, изображение исчезнет, ​​а когда вы нажмете другую кнопку для выбора следующей опции, текущее изображение исчезнет, ​​а изображение кнопки исчезнет..

Пример этой сети можно найти в разделе «Продукты и услуги» на веб-сайте GE-Energy (прокрутите немного вниз).

Как можно достичь этого эффекта?

1 Ответ

1 голос
/ 26 августа 2011

Этот эффект достигается с помощью jQuery для постепенного исчезновения изображений. В коде это будет выглядеть следующим образом: 

$('#image1').fadeOut();
$('#image2').fadeIn();

И HTML: 

<img src="first_image.jpg" id="image1"/>
<img src="second_image.jpg" id="image2"/>

Редактировать:

Это минимальный JavaScript, который вам понадобится в вашем источнике HTML: 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $('#showfirst').click(function(e) {
        if($('#image1').css('display') != 'none') return;
        $('#image2').fadeOut();
        $('#image1').fadeIn();
        e.preventDefault();
    });
    $('#showsecond').click(function(e) {
        if($('#image2').css('display') != 'none') return;
        $('#image1').fadeOut();
        $('#image2').fadeIn();
        e.preventDefault();
    });
</script>

И следующий HTML: 

<a href="#" id="showfirst">Show first image</a>
<a href="#" id="showsecond">Show second image</a>
<img src="first_image.jpg" id="image1"/>
<img src="second_image.jpg" id="image2" style="display:none"/>
...