вращающиеся изображения в формате HTML

javascript image slideshow

14916 просмотра

2 ответа

Привет всем, я пытаюсь заставить эти изображения вращаться каждые 5 секунд в HTML, используя JavaScript. Я не могу понять, почему изображения не вращаются, если кто-то может мне помочь, это было бы здорово !! благодарю вас.

<!DOCTYPE html>
<html>

<head>

<title>Concert Ads</title>

<script type="text/javascript">

var image1=new Image()
image1.src="concert1.gif"

var image2=new Image()
image2.src="concert2.gif"

var image3=new Image()
image3.src="concert3.gif"

var image4=new Image()
image4.src="concert4.gif"

var image5=new Image()
image5.src="concert5.gif"


</script>

</head>

<body>

<img src="concert1.gif" name="slide" >

<script type="text/javascript">


var step=1
function slideit() { 
document.images.slide.src=eval("image"+step+".src")

if(step<5)

step++

else

step=1

setTimeout("slideit()",5000)

slideit()

</script>

</body>


</html>
Автор: user2863675 Источник Размещён: 12.11.2019 09:11

Ответы (2)


3 плюса

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        var image1 = new Image()
        image1.src = "dummyImg1.jpg"

        var image2 = new Image()
        image2.src = "dummyImg2.jpg"

        var image3 = new Image()
        image3.src = "dummyImg3.png"
    </script>
</head>
<body>
    <img src="dummyImg1.jpg" name="slide" >
    <script type="text/javascript">
        var step = 1
        function slideit() {
            document.images["slide"].src = eval("image" + step + ".src")
            if (step < 3)
                step++
            else
                step = 1
            setTimeout("slideit()", 5000)
        }
        slideit()
    </script>
</body>
</html>
Автор: Michael Besteck Размещён: 25.10.2013 01:56

2 плюса

Ваша функция setTimeout неверна, так как вы передаете ей строку, а не функцию, и вы не закрываете свою функцию. Также очень неэффективно каждый раз создавать новый элемент изображения; массив подойдет вам гораздо лучше. Наконец, я думаю, что вы хотите использовать setInterval, а не setTimeout.

Рабочий пример здесь: http://jsfiddle.net/HUP5W/2

Очевидно, что изображения не работают, но, если вы посмотрите на консоль, она работает правильно.

var image = document.getElementById("img1");
var src = ["concert2.gif","concert3.gif","concert4.gif","concert5.gif","concert1.gif"];

var step=0
    function slideit() { 
        image.src = src[step];
        image.alt = src[step];
        if(step<4) {
            step++;
        } else {
            step=0;
        }
    }        
    setInterval(slideit,5000);
Автор: Dominic Green Размещён: 25.10.2013 01:48
Вопросы из категории :
32x32