JavaScript Slideshow mit Bildunterschrift Funktionalität

Ich brauche Hilfe mit meiner Diashow, ich habe eine Diashow mit js jedoch die Beschriftung Ich habe diese nicht mit den Bildern nur die erste hat die Beschriftung aber alle anderen Bilder nicht zeige irgendeine Beschriftung an. Hilf mir Leute. Danke.JavaScript Slideshow mit Bildunterschrift Funktionalität

HTML-Code:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Slide Show</title> 
    <link rel="stylesheet" href="main.css"> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script src="slide_show.js"></script> 
</head> 

<body> 
<section> 
    <h1>Dog Breed Slide Show</h1> 
    <h2 id="caption">Afghan-Hound</h2> 
    <img id="slide" src="images/dog0.jpg" alt="Afghan-Hound"> 
    <div id="slides"> 
     <img src="images/dog0.jpg"> 
     <img src="images/dog1.jpg" title="DOg MAn"> 
     <img src="images/dog2.jpg" alt="American-Eskimo"> 
     <img src="images/dog3.jpg" alt="French Bulldog"> 
     <img src="images/dog4.jpg" alt="German Shepard"> 
     <img src="images/dog5.jpg" alt="Italian-Greyhound"> 
     <img src="images/dog6.jpg" alt="Labrador Retriever"> 
     <img src="images/dog7.jpg" alt="Samoyed"> 
     <img src="images/dog8.jpg" alt="Siberian Husky"> 
     <img src="images/dog9.jpg" alt="Basset-Hound"> 
    </div> 


    <div id="buttons"> 
     <input type="button" id="prev" value="Previous" onclick=showPrev()> 
     <input type="button" id="pause" value="Pause" onclick=showStop()> 
    <input type="button" id="play" value="play" onclick=showAuto()> 
     <input type="button" id="next" value="Next" onclick=showNext()>   
    </div> 
</section> 
</body> 
</html>

Hier ist der Code CSS:

body { 
    font-family: Arial, Helvetica, sans-serif; 
    width: 380px; 
    height: 350px; 
    margin: 0 auto; 
    padding: 20px; 
    border: 3px solid blue; 
} 
h1, h2, ul, p { 
    margin: 0; 
    padding: 0; 
} 
h1 { 
    padding-bottom: .25em; 
    color: blue; 
} 
h2 { 
    font-size: 120%; 
    padding: .5em 0; 
} 
img { 
    height: 250px; 
} 
#slides img { 
    display: none; 
} 
#buttons { 
    margin-top: .5em; 
    text-align: center; 
}

Hier ist der JavaScript-Code:

var curimage=0; 
    var frequency=2000; 

    function showSlideNum() 
    { 
     document.getElementById('slides').value=curimage.alt; 

    } 

    function showNext() 
     { 
     curimage++; 
     if (curimage>9) 
      {curimage--; 
      alert('This is last picture in the catalog'); 
     } 
     document.images.slide.src='images/dog'+curimage+'.jpg'; 
     showSlideNum(); 
     } 


    function showPrev() 
     { 
     curimage--; 
     if (curimage<0) 
      {curimage++; 
     alert('There is no more picture before this one!!!'); 

      } 
      document.images.slide.src='images/dog'+curimage+'.jpg'; 
      showSlideNum(); 
      } 
    function clearImage() 
     { 
     curimage=0; 
     showSlideNum(); 
     } 
    function setfrequency(newFrequency) 
    { 
     frequency=newFrequency; 
     alert(frequency); 
    } 

    function showAuto() 
    { 
    curimage++; 
    if (curimage>9) 
     { 
     curimage=0 
     } 
    document.images.slide.src='images/dog'+curimage+'.jpg'; 
    showSlideNum(); 
    setTimeout('showAuto()', frequency); 
    } 

    function showStop() 
    { 
    document.location=document.location; 
    }

hier die Geige ist: https://jsfiddle.net/143sayed/d7LyjmLg/4/#&togetherjs=FjdTRl0FTe

Vielen Dank im Voraus.

Quelle

2017-05-11 sayed hussain

Ihre Geige überhaupt nicht funktioniert. Nicht einmal das Bild zu ändern. – Logiwan992

Sie sollten ein Objekt mit allen Bildern hinzufügen.

Select Element Titel und fügen jeweils Wert mit: $(elem).text(text)

$(function() { 
 
    var images = { 
 
    "0": ["http://lorempixel.com/250/250", "Afghan-Hound"], 
 
    "1": ["http://lorempixel.com/250/260", "DOg MAn"], 
 
    "2": ["http://lorempixel.com/250/270", "American-Eskimo"], 
 
    "3": ["http://lorempixel.com/250/280", "French Bulldog"], 
 
    "4": ["http://lorempixel.com/250/290", "German Shepard"], 
 
    "5": ["http://lorempixel.com/250/300", "Italian-Greyhound"], 
 
    "6": ["http://lorempixel.com/250/310", "Labrador Retriever"], 
 
    "7": ["http://lorempixel.com/250/320", "Samoyed"], 
 
    "8": ["http://lorempixel.com/250/330", "Siberian Husky"], 
 
    "9": ["http://lorempixel.com/250/340", "Basset-Hound"] 
 
    }; 
 
    var curimage = 0; 
 

 
    function showSlide() { 
 
    resume(); 
 
    $("#slide").attr("src", images[curimage][0]); 
 
    $('#caption').text(images[curimage][1]); 
 
    } 
 

 
    function showNext(bool) { 
 
    curimage += 1; 
 
    if (curimage > 9) { 
 
     curimage = 9; 
 
     return; 
 
    } 
 
    showSlide(); 
 
    } 
 

 
    function showPrev() { 
 
    curimage -= 1; 
 
    if (curimage < 0) { 
 
     curimage = 0; 
 
     return; 
 
    } 
 
    showSlide(); 
 
    } 
 
    var frequency = 2000, 
 
    pause, 
 
    playing = false; 
 

 
    function showAuto() { 
 
    if (!playing) { 
 
     playing = true; 
 
     pause = setTimeout(function(){ 
 
     curimage+=1; 
 
     if (curimage>9){ 
 
      curimage=0 
 
     } 
 
     showSlide(); 
 
     }, frequency); 
 
    } 
 
    } 
 

 
    function showStop() { 
 
    playing = false; 
 
    clearTimeout(pause); 
 
    } 
 

 
    function resume() { 
 
    if (playing) { 
 
     showStop(); 
 
     showAuto(); 
 
    } 
 
    } 
 

 
    function clearImage() { 
 
    curimage = 0; 
 
    showSlide(); 
 
    clearTimeout(pause); 
 
    } 
 
    showSlide(); 
 
    $("#prev").click(showPrev); 
 
    $("#pause").click(showStop); 
 
    $("#play").click(showAuto); 
 
    $("#next").click(showNext); 
 
}());

body { 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    width: 380px; 
 
    height: 350px; 
 
    margin: 0 auto; 
 
    padding: 20px; 
 
    border: 3px solid blue; 
 
} 
 
h1, h2, ul, p { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
h1 { 
 
    padding-bottom: .25em; 
 
    color: blue; 
 
} 
 
h2 { 
 
    font-size: 120%; 
 
    padding: .5em 0; 
 
} 
 
img { 
 
    height: 250px; 
 
} 
 
#buttons { 
 
    margin-top: .5em; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section> 
 
    <h1>Dog Breed Slide Show</h1> 
 
    <h2 id="caption">Afghan-Hound</h2> 
 
    <img id="slide"> 
 
    <div id="buttons"> 
 
     <input type="button" id="prev" value="Previous"> 
 
     <input type="button" id="pause" value="Pause"> 
 
     <input type="button" id="play" value="play"> 
 
     <input type="button" id="next" value="Next">   
 
    </div> 
 
</section>

Quelle

2017-05-12 15:46:10 AvrilAlejandro

JavaScript Slideshow mit Bildunterschrift Funktionalität

Antwort

Verwandte Themen