Анимировать простой javascript слайд-шоу

Question

Анимировать простой javascript слайд-шоу

0

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

Предварительная загрузка изображений (в заголовке сайта)

<!--
var image1=new Image;image1.src="images/referenzen/besten-weine.jpg";var image2=new         Image;image2.src="images/referenzen/pixelization.jpg";var image3=new  Image;image3.src="images/referenzen/immo-buerk.jpg"
//-->

Код в слайд-шоу (изображение src затем изменяется скриптом)

 <a href="javascript:slidelink()"><img src="images/referenzen/besten-weine.jpg" name="slide" width="445px" height="300px"></a>
            <script type="text/javascript">
                <!--
                var step=1
                //a variable that will keep track of the image currently being displayed.
                var whichimage=1
                function slideit(){
                if (!document.images)
                return
                document.images.slide.src=eval("image"+step+".src")
                whichimage=step
                if (step<3)
                step++
                else
                step=1
                setTimeout("slideit()",4000)
                }
                slideit()
                function slidelink(){
                if (whichimage==1)
                window.location="#weine"
                else if (whichimage==2)
                window.location="#mc"
                else if (whichimage==3)
                window.location="#immo"
                }
                //-->
            </script>

Я могу сделать некоторые анимации CSS, но новичок в javascript.

geek 03 янв. 2014, в 17:42

Источник

Теги:

javascript

html

animation

slideshow

2 ответа

Ещё вопросы

Santiago · Answer 1 · 2014-01-03T13-54-00.000Z

Html:

<div>
        <a href="#"><img src="back.png" title="back" id="back"></a>
        <a href="#"><img src="next.png" title="next" id="next"></a>
</div>

<img src="image1.png" id="image1" />
<img src="image2.png" id="image2" />
<img src="image3.png" id="image3" />

JQuery и javascript:

Глобальная переменная:

var actual = 1;

Чтобы перейти к следующему изображению:

$('#next').click(function(){    
    $('img').stop(true, true);
    $('#image' + _actual).fadeOut(function(){
        actual++;
        if(actual > 3){
         actual = 1;
        }
        $('#image' + actual).fadeIn();          
    });
});

Чтобы перейти к предыдущему изображению:

$('#back').click(function(){    
    $('img').stop(true, true);
    $('#image' + _actual).fadeOut(function(){
        actual--;
        if(actual == 0){
         actual = 3;
        }
        $('#image' + actual).fadeIn();          
    });
});

Я просто написал это, не проверял, но я думаю, что это работает.

Это, к сожалению, не работает. Вы можете посмотреть это на моем сайте. donie-webdesign.de Спасибо за работу, которую вы вложили, хотя. Может я что то не так сделал?
Глядя на ваш сайт, похоже, что глобальная переменная _actual отсутствует. Пожалуйста, проверьте, если вы создаете эту переменную globaly, и не забудьте инициализировать ее значением 1.
где бы я установить переменную _actual? В том же сценарии, что и для кнопок или в голове или где?

Halcyon · Answer 2 · 2014-01-03T13-46-00.000Z

Предполагая этот HTML:

<div class="slideshow">
    <div class="image-front"><img src="photo1.png" /></div>
    <div class="image-back"><img src="photo2.png" /></div>
</div>

Ты можешь сделать:

.slideshow .image-front {
    transition: .5s;
    transition-property: opacity;
}
.slideshow.transition .image-front {
    opacity: 0;
}

Затем через .5 секунды поменяйте изображение на image-back сторону image-front image-back image-front.