个人中心
gpt4 book ai didi

JavaScript、JQuery 上一个按钮

转载 作者：行者123 更新时间：2023-12-03 05:33:25 24 4
gpt4 key购买 nike

我需要一些有关此代码的帮助。我想为上一个创建一个事件单击按钮。我怎样才能使用一点代码来做到这一点？类似于我的“下一步”按钮单击事件。

这是我的完整代码。

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

I thought of during it this way, but that is not working. 

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

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

Something similar to this Next button click event. 

$("#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 上一个按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40835662/

24 4 0
文章推荐： javascript - 如何在 ngRepeat (AngularJS) 中重复点击处理程序？
文章推荐： javascript - 在 ES5 中使用 JS 对象作为集合时值类型的效率
文章推荐： javascript - 如何更改 Jscolor 以删除十六进制
文章推荐： javascript - 将值数据库传递给 Javascript
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com