wie um das Bild zu ändern, wenn eine Seite aktualisiert wird mit JavaScript?

Möchte ich das Bild ändern, wenn die Seite aktualisieren mit html. Ich meine teilweise code hier. ich möchte ein Skript oder irgendetwas tun, das Bild ändern, wenn die Seite bekommt, aktualisieren.. Bitte helfen Sie mir, dies zu tun mit html ...

        <div class="one-image">
           <a href="">
            <img src="img/IMG_1035.jpg" class="giThumbnail" alt="Nightclubs"></a><h4 class="giDescription">
             Nightclubs</h4>
             </div>

dem obigen Bild tag Bild ändern, jeder Aktualisierung.. bitte helft mir ..

ändern, was?
tun wollen, um zu zeigen, random(verschiedene) Bilder auf jedem aktualisieren?
Danke für deine schnelle Antwort. ja, absolut

InformationsquelleAutor Fernando | 2012-03-14

  1. 3

    Ich glaube, das würde funktionieren, aber alle Ihre Bilder werden nacheinander benannt, z.B. 1-100. Beachten Sie auch, dass das Skript platziert wurde, NACH dem IMG-tag.

    <div class="one-image">            
  <a href="">             
    <img id="imgRand" src="" class="giThumbnail" alt="Nightclubs">
  </a>
  <h4 class="giDescription">              
    Nightclubs
  </h4>              
</div> 

<script language="javascript">
  //random number between 1 and 100
  var numRand = Math.floor(Math.random()*101);
  document.getElementById("imgRand").src = "img/IMG_"+numRand+".jpg";
</script>

    Random Formel in JS ist:

    var random = Math.floor(Math.random() * (max - min + 1)) + min;

    also, wenn Sie hatte nur 5 Bilder zwischen 135 und 140 dein script würde wie folgt Aussehen:

    var random = Math.floor(Math.random() * (140 - 135 + 1)) + 135;

    Wenn Sie wollte, um das Bild zu ändern client-Seite, wie eine Diashow, fügen Sie einfach einen timer.

    <script language="javascript">
  function setImg(){
  //random number between 1 and 100
  var numRand = Math.floor(Math.random()*101);
  document.getElementById("imgRand").src = "img/IMG_"+numRand+".jpg";}


  //call it the first time
  setImg();

  //set an interval to change it every 30 seconds
  window.setInterval("setImg()",30000);
</script>
    angenommen, ich verwende nur fünf Bild bedeutet, was ich Tue?
    senken Sie den Zufallszahlengenerator Grenzen zu pick ein Bild von 1-5, und nennen Sie Sie IMG_1.jpg, IMG_2.jpg usw.
    soll ich ändern 101 um alles, was ah?
    wenn Sie wollten, 1-5, Sie würde sich ändern, 101-6. Ich habe aktualisiert mein Antwort zu geben Sie die Formel für einen Bereich von zahlen.
    Vielen Dank chris..

    InformationsquelleAutor Chris Gessler

  2. 2

    Nicht Getestet, aber so etwas sollte funktionieren mit Javascript:

    
//Add following inside script tag
//Add id to your image tag
var theImages = new Array();
theImages[0] = 'images/first.gif' //replace with names of images
theImages[1] = 'images/second.gif' //replace with names of images
theImages[2] = 'images/third.gif' //replace with names of images
......
var j = 0
var p = theImages.length;
var preBuffer = new Array();

for (i = 0; i < p; i++){
    preBuffer[i] = new Image();
    preBuffer[i].src = theImages[i];
}
var whichImage = Math.round(Math.random()*(p-1));

function showImage(){
    document.getElementById("yourImgTagId").src = theImages[whichImage];
}

//call the function 
showImage();

    Meinst du so etwas wie, dass

    InformationsquelleAutor Sudhir Bastakoti

  3. 0

    Welche Art von server verwenden Sie? Mit PHP oder ASP Sie können dies mit einem Skript, das Zyklen durch Ihre Bilder in einem Skript. Damit Ihre HTML-würden zeigen, um das Skript, anstatt direkt zu einem Bild:

    <img src="image_rotation_script.php" class="giThumbnail" alt="Nightclubs">

    Dann dein script würde, drehen Sie durch Ihre verschiedenen Bildern. Hier ist ein PHP-Beispiel:

    <?php
header('content-type: image/jpeg');
//Your own logic here to pull from a database, randomize an array of images etc.
$images = array('img/IMG_1.jpg','img/IMG_2.jpg','img/IMG_3.jpg');
$imageFile = array_rand($images);
$image = imagecreatefromjpeg($imageFile);
imagejpeg($image);
imagedestroy($image);
?>

    InformationsquelleAutor davidethell

  4. 0

    Nutzen können JavaScript verwenden, ändern Sie das src-Feld des image-tag. Legen Sie zuerst ein ID-Attribut zum img-tag, oder ein NAME-Attribut, wenn es erscheint öfter auf der gleichen Seite.

    <img id="nightClubImage" src="img/IMG_1035.jpg" class="giThumbnail" alt="Nightclubs">

    Dann schreiben Sie ein Skript, und ändern Sie das src-Feld:

    document.getElementById('nightClubImage').src = "newImage.jpg";
    Ich weiß nicht, java-script, geben Sie mir bitte vollständigen code, den Freund..
    Sudhirs Antwort richtig ist. Siehe oben.

    InformationsquelleAutor Stefan

  5. 0

    Wenn Sie möchten, verwenden Sie nur client-side-Lösung versuchen Sie Folgendes:

    <img src="img/IMG_1035.jpg" class="giThumbnail" alt="Nightclubs">
<script type="text/javascript">
    var images = ['img/IMG_1035.jpg', 'img/IMG_1036.jpg', 'img/IMG_1037.jpg'];
    document.getElementById('gitThumbnail').src = images[Math.round((Math.random() * (images.length-1))];
</script>

    InformationsquelleAutor Minty

Schreibe einen Kommentar