Cum pot parcurge imaginile în JavaScript? (Programare, Javascript, Html)

ShadyBears a intrebat.
a intrebat.

html-ul meu:

<img src="C:UsersShadyDownloadsrestaurantfood1.jpg" alt="rotating image" width="400" height="300" id="rotator">

Javascript-ul meu:

<script type="text/javascript">
        (function() {
            var rotator = document.getElementById('rotator');  
            var imageDir = 'C:\Users\Shady\Downloads\restaurant\';                          
            var delayInSeconds = 5;                            

            var images = ['food1.jpg', 'food2.jpg', 'food3.jpg', 'food4.jpg', 'food5.jpg', 'food6.jpg', 'food7.jpg', 'food8.jpg'];

            var num = 0;
            var changeImage = function() {
                var len = images.length;
                rotator.src = imageDir + images[num++];
                if (num == len) {
                    num = 0;
                }
            };
            setInterval(changeImage, delayInSeconds * 1000);
        })();
        </script>

Totul are sens pentru mine, dar din anumite motive nu funcționează. Se afișează doar prima imagine (nu trece prin imagini). Vă rog să mă anunțați dacă mai aveți nevoie de ceva. Vă mulțumesc.

Comentarii

  • Prin rotire vă referiți la schimbarea imaginilor dintr-o listă (ciclul prin ele) sau la rotirea efectivă a acestora, cum ar fi schimbarea orientării cu x grade? –  > Por Jon Surrell.
  • Ciclul… Am schimbat titlul/descrierea. –  > Por ShadyBears.
  • arată bine pentru mine, verificați th rotator variabila cu console.log. poate că JavaScript nu găsește div-ul, pentru că DOM nu este pregătit –  > Por Nano.
  • Unde este plasat scriptul? înainte sau după tag-ul img? –  > Por Markai.
  • Am încercat o funcție de test definind-o ca var testf = function() {... și apoi am folosit-o în setInterval. Nu a funcționat. Am schimbat-o în function testf() {... și am folosit-o în setInterval. A funcționat. –  > Por kainaw.
4 răspunsuri
Omar Elawady

obțineți elementul ‘rotator’ înainte ca documentul să fie încărcat, deci nu există.

Încercați acest lucru:

function start() {
    var rotator = document.getElementById('rotator');  
    var imageDir = 'C:\Users\Shady\Downloads\restaurant\';                          
    var delayInSeconds = 1;                            

    var images = ['food1.jpg', 'food2.jpg', 'food3.jpg', 'food4.jpg', 'food5.jpg', 'food6.jpg', 'food7.jpg', 'food8.jpg'];

    var num = 0;
    var changeImage = function() {
        var len = images.length;
        rotator.src = imageDir + images[num++];
        if (num == len) {
            num = 0;
        }
    };
    setInterval(changeImage, delayInSeconds * 1000);
};
window.onload=function(){
start();
}

Boerkie

Preîncărcați imaginile:

<script type="text/javascript">

var slideimages = new Array() // create new array to preload images
slideimages[0] = new Image() // create new instance of image object
slideimages[0].src = "firstcar.gif" // set image src property to image path, preloading image in the process
slideimages[1] = new Image()
slideimages[1].src = "secondcar.gif"
slideimages[2] = new Image()
slideimages[2].src = "thirdcar.gif"

</script>

Afișați prima imagine:

<img src="firstcar.gif" id="slide" width="100" height="56" />

Creați prezentarea de diapozitive (ciclu):

<script type="text/javascript">

//variable that will increment through the images
var step=0

function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.getElementById('slide').src = slideimages[step].src
if (step<2)
step++
else
step=0
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}

slideit()

</script>

Comentarii

  • Acesta a fost de fapt cel de care aveam nevoie din cauza organizării elementelor din matrice și funcționează foarte simplu. 🙂 –  > Por Jesse Steele.
Kalish

Iată cum puteți încerca…pentru mine funcționează bine….

<html>
<body>
<img src="file:///C:/Users/Public/Pictures/Sample%20Pictures/test1 (2).jpg" alt="rotating image" width="400" height="300" id="rotator"> 
<script type="text/javascript">
    (function() {
        var rotator = document.getElementById('rotator');  
        var imageDir = 'file:///C:/Users/Public/Pictures/Sample%20Pictures/';                         
        var delayInSeconds = 5;                            

        var images = ['test1.jpg', 'test1 (2).jpg', 'test1 (3).jpg', 'test1 (4).jpg', 'test1 (5).jpg', 'test1 (6).jpg', 'test1 (7).jpg', 'test1 (8).jpg'];

        var num = 0;
        var changeImage = function() {
            var len = images.length;
            rotator.src = imageDir + images[num++];
            if (num == len) {
                num = 0;
            }
        };
        setInterval(changeImage, delayInSeconds * 100);
    })();
    </script>   
</body> 
</html>

Comentarii

  • scriptul este în afara corpului –  > Por Omar Elawady.
Markai

Încercați să accesați elementul DOM cu id-ul rotator înainte ca acesta să fie încărcat.Există două modalități de a ocoli această problemă:

  1. Puteți muta script sub eticheta img pentru că astfel javascript va fi executat după ce se va executa tag-ul img element a fost încărcat:

    <img src="C:UsersShadyDownloadsrestaurantfood1.jpg" alt="rotating image" width="400" height="300" id="rotator">
    <script type="text/javascript">
        (function() {
            var rotator = document.getElementById('rotator');  
            var imageDir = 'C:\Users\Shady\Downloads\restaurant\';                          
            var delayInSeconds = 5;                            
    
            var images = ['food1.jpg', 'food2.jpg', 'food3.jpg', 'food4.jpg', 'food5.jpg', 'food6.jpg', 'food7.jpg', 'food8.jpg'];
    
            var num = 0;
            var changeImage = function() {
                var len = images.length;
                rotator.src = imageDir + images[num++];
                if (num == len) {
                    num = 0;
                }
            };
            setInterval(changeImage, delayInSeconds * 1000);
        })();
    </script>
    
  2. Puteți seta gestionarul de evenimente onload pentru document la funcția dvs. anonimă (sau îi puteți da un nume, dacă doriți):

    <script type="text/javascript">
    window.onload = function() {
        var rotator = document.getElementById('rotator');  
        var imageDir = 'C:\Users\Shady\Downloads\restaurant\';                          
        var delayInSeconds = 5;                            
    
        var images = ['food1.jpg', 'food2.jpg', 'food3.jpg', 'food4.jpg', 'food5.jpg', 'food6.jpg', 'food7.jpg', 'food8.jpg'];
    
        var num = 0;
        var changeImage = function() {
            var len = images.length;
            rotator.src = imageDir + images[num++];
            if (num == len) {
                num = 0;
            }
        };
        setInterval(changeImage, delayInSeconds * 1000);
    };
    </script>