Javascript, JQuery Предыдущая кнопка

Мне нужна помощь с этим кодом. Я хочу создать кнопку нажатия события для предыдущего. Как это сделать, используя небольшой код? что-то похожее на мое следующее нажатие кнопки.Javascript, JQuery Предыдущая кнопка

Вот мой полный код.

$(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>

я думал во время него таким образом, но это не работает.
$("#prev").on("click", function() { 

    if (imag === imageSize) { 
     $("#prev").prop("disabled", true); 
    } 
    else { 
     ++imag; 
     runSlideShow(-1); 
    } 
}); 
Нечто похожее на это Следующий случай нажатия кнопки.
$("#next").on("click", function (e) { 
    e.preventDefault(); 
    if (imag === imageSize) { 
     $("#next").prop("disabled", true); 
    } 
    else { 
     ++imag; 
     runSlideShow(1); 
    } 
}); 

Любая помощь, пожалуйста.

источник

2016-11-28 Jabateh

тест моя идея =)

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">

источник

2016-11-28 01:51:08 Pinguto

ответ

Смежные вопросы