[英]Javascript, JQuery Previous button
我需要有關此代碼的幫助。 我想為上一個事件創建一個單擊按鈕。 我如何使用一些代碼來做到這一點？ 一些類似於“下一步”按鈕單擊事件的操作。
這是我的完整代碼。
$(document).ready(function() { var nextSlide = $("#slides img:first-child"); var nextCaption; var nextSlideSource; var counter = 0; // the function for running the slide show var runSlideShow = function() { $("#caption").fadeOut(1000); $("#slide").fadeOut(1000, function () { if (nextSlide.next().length === 0) { nextSlide = $("#slides img:first-child"); } else { nextSlide = nextSlide.next(); } nextSlideSource = nextSlide.attr("src"); nextCaption = nextSlide.attr("alt"); $("#slide").attr("src", nextSlideSource).fadeIn(1000); $("#caption").text(nextCaption).fadeIn(1000); } ); }; // start the slide show 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 { 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; }
<!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>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"> <input type="button" id="prev" value="Previous" disabled> <input type="button" id="play" value="Pause"> <input type="button" id="next" value="Next" disabled> </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); } });
請幫忙。
測試我的想法=）
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">
轉到上一頁並刷新 - 使用javascript / Jquery在一個按鈕中
[英]Go To Previous Page and Refresh - both in one button using javascript/Jquery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.