Javascript, JQuery Vorherige Schaltfläche

Ich brauche etwas Hilfe mit diesem Code. Ich möchte einen Ereignis-Klick-Button für den vorherigen erstellen. Wie kann ich das mit ein wenig Code machen? etwas ähnliches wie bei meinem Next Button Click Event.Javascript, JQuery Vorherige Schaltfläche

Hier ist mein voller Code.

$(document).ready(function() { 
 
\t var nextSlide = $("#slides img:first-child"); 
 
\t var nextCaption; 
 
\t var nextSlideSource; 
 
     var counter = 0; 
 
\t \t 
 
\t // the function for running the slide show 
 
    var runSlideShow = function() { 
 
     \t $("#caption").fadeOut(1000); 
 
     \t $("#slide").fadeOut(1000, 
 
     \t \t function() { 
 
     \t  \t if (nextSlide.next().length === 0) { 
 
\t \t \t \t \t nextSlide = $("#slides img:first-child"); 
 
\t \t \t \t } 
 
\t \t \t \t else { 
 
\t \t \t \t \t nextSlide = nextSlide.next(); 
 
\t \t \t \t } 
 
\t \t \t \t nextSlideSource = nextSlide.attr("src"); 
 
\t \t \t \t nextCaption = nextSlide.attr("alt"); 
 
\t \t \t \t $("#slide").attr("src", nextSlideSource).fadeIn(1000); \t \t \t \t \t 
 
\t \t \t \t $("#caption").text(nextCaption).fadeIn(1000); 
 
\t \t \t } 
 
\t \t); 
 
\t }; 
 
     
 
\t // start the slide show 
 
\t var timer = setInterval(runSlideShow, 3000); 
 
     
 
     $("#play").on("click", function() { 
 
      if($(this).val() === "Pause") { 
 
       clearInterval(timer); 
 
       $(this).val("Play"); 
 
       $("#prev").prop("disabled", false); 
 
       $("#next").prop("disabled", false); 
 
      } 
 
      else if ($(this).val() === "Play") { 
 
       timer = setInterval(runSlideShow, 3000); 
 
       $(this).val("Pause"); 
 
       $("#prev").prop("disabled", true); 
 
       $("#next").prop("disabled", true); 
 
      } 
 
      
 
     }); 
 
     
 
    var imag = $("#slides img").index(); 
 
    var imageSize = $("#slides img").length - 1; 
 
    
 
    $("#next").on("click", function (e) { 
 
     e.preventDefault(); 
 
     if (imag === imageSize) { 
 
      $("#next").prop("disabled", true); 
 
     } 
 
     else { 
 
      ++imag; 
 
      runSlideShow(1); 
 
     } 
 
    }); 
 
    
 
});

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

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <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> 
 
\t <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
 
    <script src="slide_show.js"></script> 
 
</head> 
 

 
<body> 
 
<section> 
 
    <h1>Fishing Slide Show</h1> 
 
    <h2 id="caption">Casting on the Upper Kings</h2> 
 
    <img id="slide" src="images/casting1.jpg" alt=""> 
 
    <div id="slides"> 
 
     <img src="images/casting1.jpg" alt="Casting on the Upper Kings"> 
 
     <img src="images/casting2.jpg" alt="Casting on the Lower Kings"> 
 
     <img src="images/catchrelease.jpg" alt="Catch and Release on the Big Horn"> 
 
     <img src="images/fish.jpg" alt="Catching on the South Fork"> 
 
     <img src="images/lures.jpg" alt="The Lures for Catching"> 
 
    </div> 
 
    <div id="buttons"> 
 
    \t <input type="button" id="prev" value="Previous" disabled> 
 
    \t <input type="button" id="play" value="Pause"> 
 
    \t <input type="button" id="next" value="Next" disabled>  \t 
 
    </div> 
 
</section> 
 
</body> 
 
</html>

dachte ich während es auf diese Weise, aber das funktioniert nicht.

$("#prev").on("click", function() { 

    if (imag === imageSize) { 
     $("#prev").prop("disabled", true); 
    } 
    else { 
     ++imag; 
     runSlideShow(-1); 
    } 
});

Ähnliches Ähnliches Klicken Sie auf dieses Ereignis.

$("#next").on("click", function (e) { 
    e.preventDefault(); 
    if (imag === imageSize) { 
     $("#next").prop("disabled", true); 
    } 
    else { 
     ++imag; 
     runSlideShow(1); 
    } 
});

Jede Hilfe bitte.

Quelle

2016-11-28 Jabateh

Test meine Idee =)

var mySlide = function(){ 
 
    var index = 0; 
 
    var timer = false; 
 
    var self = this; 
 
    
 
    self.data = []; 
 
    self.start = function(){ 
 
    timer = setInterval(self.next, 3000); 
 
    return self; 
 
    }; 
 
    
 
    self.stop = function(){ 
 
    clearInterval(timer); 
 
    timer = false; 
 
    return self; 
 
    }; 
 
    
 
    self.pause = function(){ 
 
    if(timer == false){ 
 
     self.start(); 
 
    } else { 
 
     self.stop(); 
 
    } 
 
    }; 
 
    
 
    self.next = function(){ 
 
    if(self.data.length > 0){ 
 
     self.stop().start(); // reset the timer 
 
     index++; 
 
     self.update(); 
 
    } 
 
    }; 
 
    
 
    self.prev = function(){ 
 
    if(self.data.length > 0 && index > 0){ 
 
     self.stop().start(); // reset the timer 
 
     index--; 
 
     self.update(); 
 
    } 
 
    }; 
 
    
 
    self.update = function(){ 
 
    var item = self.data[index % self.data.length]; // calculating the value of INDEX 
 
    $('.print').fadeOut(1000,function(){ 
 
     $(this).html(item).fadeIn(1000); 
 
    }); 
 
    }; 
 
} 
 

 
// RUN CODE! 
 
var test = new mySlide(); 
 
test.data = [ // LOAD ITEM! 
 
    'food', 
 
    'bar', 
 
    $('<img/>').attr('src','https://www.google.it/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png') 
 
    ]; 
 

 
test.start().update(); // START! 
 

 
$('.prev').click(test.prev); // add event! 
 
$('.pause').click(test.pause); 
 
$('.next').click(test.next);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="print"></div> 
 
<input type="button" value="prev" class="prev"> 
 
<input type="button" value="pause" class="pause"> 
 
<input type="button" value="next" class="next">

Quelle

2016-11-28 01:51:08 Pinguto

Javascript, JQuery Vorherige Schaltfläche

Antwort

Verwandte Themen