Javascript 使用jQuery单击按钮时如何显示幻灯片？_Javascript_Jquery_Html

Javascript 使用jQuery单击按钮时如何显示幻灯片？

javascript jquery html

Javascript 使用jQuery单击按钮时如何显示幻灯片？,javascript,jquery,html,Javascript,Jquery,Html,我有一个网页，上面显示了四个按钮，一副牌中每一套都有一个按钮。当用户点击按钮时，它应该显示该套装的卡片图像，从Ace、2、3等开始，直到King。第一张卡片应显示三秒，然后被下一张卡片替换三秒，以此类推。以下是我的HTML： <!DOCTYPE html> <html> <head> <title>jQuery Assignment 4 - Cards</title> <link href="styles/

我有一个网页，上面显示了四个按钮，一副牌中每一套都有一个按钮。当用户点击按钮时，它应该显示该套装的卡片图像，从Ace、2、3等开始，直到King。第一张卡片应显示三秒，然后被下一张卡片替换三秒，以此类推。以下是我的HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <title>jQuery Assignment 4 - Cards</title> 
    <link href="styles/my_style.css" rel="stylesheet">
</head> 
<body>
    <div id="main">
        <h1>Click a suit to reveal a card</h1>
        <div id="my_hand">
            <img src="images/hit_small.jpg" id="cardBack">
        </div>
        <div id="controls">
            <div id="btnHearts">
                <button>Hearts</button>
            </div>
            <div id="btnDiamonds">
                <button>Diamonds</button>
            </div>
            <div id="btnClubs">
                <button>Clubs</button>
            </div>
            <div id="btnSpades">
                <button>Spades</button>
            </div>
        </div>
    </div>

    <script src="scripts/jquery-1.6.2.min.js"></script>
    <script src="scripts/my_scripts.js"></script>
</body>
</html>

以下是我的javascript：

$(document).ready(function(){

function card(name,suit,value) {
    this.name = name;
    this.suit = suit;
    this.value = value;
};

var old_cards = new Array();

var hearts = [
    new card('Ace', 'Hearts',1),
    new card('Two', 'Hearts',2),
    new card('Three', 'Hearts',3),
    new card('Four', 'Hearts',4),
    new card('Five', 'Hearts',5),
    new card('Six', 'Hearts',6),
    new card('Seven', 'Hearts',7),
    new card('Eight', 'Hearts',8),
    new card('Nine', 'Hearts',9),
    new card('Ten', 'Hearts',10),
    new card('Jack', 'Hearts',10),
    new card('Queen', 'Hearts',10),
    new card('King', 'Hearts',10)

];

var diamonds = [
    new card('Ace', 'Diamonds',1),
    new card('Two', 'Diamonds',2),
    new card('Three', 'Diamonds',3),
    new card('Four', 'Diamonds',4),
    new card('Five', 'Diamonds',5),
    new card('Six', 'Diamonds',6),
    new card('Seven', 'Diamonds',7),
    new card('Eight', 'Diamonds',8),
    new card('Nine', 'Diamonds',9),
    new card('Ten', 'Diamonds',10),
    new card('Jack', 'Diamonds',10),
    new card('Queen', 'Diamonds',10),
    new card('King', 'Diamonds',10)
];

var clubs = [
    new card('Ace', 'Clubs',1),
    new card('Two', 'Clubs',2),
    new card('Three', 'Clubs',3),
    new card('Four', 'Clubs',4),
    new card('Five', 'Clubs',5),
    new card('Six', 'Clubs',6),
    new card('Seven', 'Clubs',7),
    new card('Eight', 'Clubs',8),
    new card('Nine', 'Clubs',9),
    new card('Ten', 'Clubs',10),
    new card('Jack', 'Clubs',10),
    new card('Queen', 'Clubs',10),
    new card('King', 'Clubs',10)
];

var spades = [
    new card('Ace', 'Spades',1),
    new card('Two', 'Spades',2),
    new card('Three', 'Spades',3),
    new card('Four', 'Spades',4),
    new card('Five', 'Spades',5),
    new card('Six', 'Spades',6),
    new card('Seven', 'Spades',7),
    new card('Eight', 'Spades',8),
    new card('Nine', 'Spades',9),
    new card('Ten', 'Spades',10),
    new card('Jack', 'Spades',10),
    new card('Queen', 'Spades',10),
    new card('King', 'Spades',10)
];

var hand = {
    cards : new Array(),
};

$("#btnHearts").click(function(){
    var index = $.inArray(index, hearts);

    do {
        //Show a new card every 3 seconds, starting with the Ace, then 2, 3, etc...
    }while {

    }

    var c = hearts[ index ];
            old_cards[old_cards.length] = index;
            hand.cards[hand.cards.length] = c;

    var $i = $("<img>");
            $i.addClass("current_hand")
              .appendTo("#my_hand");

            $("<img>").attr('id', 'cardFront')
                      .attr('alt', c.name + ' of ' + c.suit )
                      .attr('title', c.name + ' of ' + c.suit )
                      .attr('src', 'images/cards/' + c.suit + '/' + c.name + '.jpg' )
                      .appendTo($i);   
    });
});

$（文档）.ready（函数（）{
功能卡（姓名、套装、价值）{
this.name=名称；
这套衣服；
这个值=值；
};
var old_cards=新数组（）；
var hearts=[
新卡（'Ace'，'Hearts'，1），
新卡（'2'、'Hearts'，2），
新卡（'3'、'Hearts'，3），
新卡（'4'、'Hearts'，4），
新卡（'5'，'Hearts'，5），
新卡（'6'、'Hearts'，6），
新卡（'7'，'Hearts'，7），
新卡（'8'，'Hearts'，8），
新卡（'9'，'Hearts'，9），
新卡（'10'，'Hearts'，10），
新卡（'Jack'、'Hearts'，10），
新卡（‘女王’、‘红心’、10），
新卡（‘国王’、‘红心’、10）
];
var钻石=[
新卡（'Ace'，'Diamonds'，1），
新卡（'2'，'菱形'，2），
新卡（'3'，'Diamonds'，3），
新卡（'4'，'Diamonds'，4），
新卡（'5'，'Diamonds'，5），
新卡（'6'，'Diamonds'，6），
新卡（'7'，'Diamonds'，7），
新卡（‘8’、‘钻石’、8），
新卡（‘九’、‘钻石’、9），
新卡（‘十’、‘钻石’、十），
新卡（‘杰克’、‘钻石’、10），
新卡（‘女王’、‘钻石’、10），
新卡（‘国王’、‘钻石’、10）
];
var俱乐部=[
新卡（'Ace'，'Clubs'，1），
新卡（“两张”，“俱乐部”，2张），
新卡（“三张”，“俱乐部”，3张），
新卡（'4'、'Club'，4），
新卡（'5'、'Club'，5），
新卡（“六张”，“俱乐部”，6张），
新卡（'7'、'Club'，7），
新卡（'8'、'Club'，8），
新卡（'9'，'Club'，9），
新卡（'10'、'Club'，10），
新卡（‘杰克’、‘俱乐部’、10），
新卡（‘女王’、‘俱乐部’、10），
新卡（‘国王’、‘俱乐部’、10）
];
变量spades=[
新牌（‘A’、‘黑桃’、1），
新卡（'2'，'Spades'，2），
新卡（'3'，'Spades'，3），
新卡（'4'，'Spades'，4），
新卡（'5'，'Spades'，5），
新卡（'6'，'Spades'，6），
新卡（'7'，'Spades'，7），
新牌（'8'，'Spades'，8），
新牌（'9'，'Spades'，9），
新卡（'10'，'Spades'，10），
新卡（'Jack'，'Spades'，10），
新卡（'女王'，'黑桃'，10），
新卡（‘国王’、‘黑桃’、10）
];
变量手={
卡片：新数组（），
};
$（“#btnHearts”）。单击（函数（）{
var指数=$.inArray（指数，心脏）；
做{
//每3秒显示一张新卡，从a开始，然后是2、3等。。。
}当{
}
var c=心脏[指数]；
旧卡片[旧卡片.长度]=索引；
手牌[手牌长度]=c；
变量$i=$（“
我对这一点很迷茫。我知道我想将Ace的索引从0开始，在设置三秒计时器时循环通过每一个索引。非常感谢您的帮助！

好的，这里有一个非常简单的例子，说明了一种方法，并不是说这是最好的，甚至不一定是最干净的方法，但这只是一些回调函数在需要时用一些自调用函数来维护适当的作用域
HTML
是因为我需要创建一个自调用函数。这是因为这里讨论了一个概念：
我不会再重复了，因为他们在解释上做得很好。

好的，这里有一个非常简单的例子，说明了一种方法，并不是说这是最好的，甚至不一定是最干净的方法，但这只是一些回调函数在需要时用一些自调用函数来维护适当的作用域
HTML
是因为我需要创建一个自调用函数。这是因为这里讨论了一个概念：
我不会再重复了，因为他们在解释上做得很好。
我用了另一种方式
主要是，您需要：
每个按钮的事件侦听器
每3秒运行一次的计时器setInterval
在所有卡（3*13）之后过期的计时器setTimeout
首先，定义：
var index = 0;

var cards = [
  'Ace',
  'Two',
  'Three',
  'Four',
  'Five',
  'Six',
  'Seven',
  'Eight',
  'Nine',
  'Ten',
  'Jack',
  'Queen',
  'King'
];

var types = [
  {
    name: 'hearts',
    imgSrc: 'img/hearts/'
  },
  {
    name: 'diamonds',
    imgSrc: 'img/diamonds/'
  },
  {
    name: 'clubs',
    imgSrc: 'img/clubs/'
  },
  {
    name: 'spades',
    imgSrc: 'img/spades/'
  }
];

接下来，我们添加事件侦听器：
$('#btnHearts').click(function(type) {
  render(0);
});

$('#btnDiamonds').click(function(type) {
  render(1);
});

$('#btnClubs').click(function(type) {
  render(2);
});

$('#btnSpades').click(function(type) {
  render(3);
});

然后，我们把我们的函数，render
函数，它触发2个计时器，和startShow
函数，它每3秒运行一次
渲染
功能：
var render = function(type) {

  // Disable all buttons
  $(':button').prop('disabled', true);

  // Start the cards show
  var clock = setInterval(function() {
    startShow(type, index);
    index++;
  }, 3000);

  // Set a timer to stop the show
  setTimeout(function() {
    // Stop the cards show
    clearInterval(clock);
    // Enable all buttons
    $(':button').prop('disabled', false);
    // Reset index
    index = 0;
  }, 41990);

}

var startShow = function(type, index) {
  $('#cardBack').attr('src', types[type].imgSrc + cards[index] + '.jpg');
  $('#cardBack').attr('title', types[type].name);
}

开始显示
功能：
var render = function(type) {

  // Disable all buttons
  $(':button').prop('disabled', true);

  // Start the cards show
  var clock = setInterval(function() {
    startShow(type, index);
    index++;
  }, 3000);

  // Set a timer to stop the show
  setTimeout(function() {
    // Stop the cards show
    clearInterval(clock);
    // Enable all buttons
    $(':button').prop('disabled', false);
    // Reset index
    index = 0;
  }, 41990);

}

var startShow = function(type, index) {
  $('#cardBack').attr('src', types[type].imgSrc + cards[index] + '.jpg');
  $('#cardBack').attr('title', types[type].name);
}

注意：您的图像需要类似于：img/hearts/Ace.jpg

希望有帮助！
我用另一种方式做了
主要是，您需要：
每个按钮的事件侦听器
每3秒运行一次的计时器setInterval
在所有卡（3*13）之后过期的计时器setTimeout
首先，定义：
var index = 0;

var cards = [
  'Ace',
  'Two',
  'Three',
  'Four',
  'Five',
  'Six',
  'Seven',
  'Eight',
  'Nine',
  'Ten',
  'Jack',
  'Queen',
  'King'
];

var types = [
  {
    name: 'hearts',
    imgSrc: 'img/hearts/'
  },
  {
    name: 'diamonds',
    imgSrc: 'img/diamonds/'
  },
  {
    name: 'clubs',
    imgSrc: 'img/clubs/'
  },
  {
    name: 'spades',
    imgSrc: 'img/spades/'
  }
];

接下来，我们添加事件侦听器：
$('#btnHearts').click(function(type) {
  render(0);
});

$('#btnDiamonds').click(function(type) {
  render(1);
});

$('#btnClubs').click(function(type) {
  render(2);
});

$('#btnSpades').click(function(type) {
  render(3);
});

然后，我们把我们的函数，render
函数，它触发2个计时器，和startShow
函数，它每3秒运行一次
渲染
功能：
var render = function(type) {

  // Disable all buttons
  $(':button').prop('disabled', true);

  // Start the cards show
  var clock = setInterval(function() {
    startShow(type, index);
    index++;
  }, 3000);

  // Set a timer to stop the show
  setTimeout(function() {
    // Stop the cards show
    clearInterval(clock);
    // Enable all buttons
    $(':button').prop('disabled', false);
    // Reset index
    index = 0;
  }, 41990);

}

var startShow = function(type, index) {
  $('#cardBack').attr('src', types[type].imgSrc + cards[index] + '.jpg');
  $('#cardBack').attr('title', types[type].name);
}

开始显示
功能：
var render = function(type) {

  // Disable all buttons
  $(':button').prop('disabled', true);

  // Start the cards show
  var clock = setInterval(function() {
    startShow(type, index);
    index++;
  }, 3000);

  // Set a timer to stop the show
  setTimeout(function() {
    // Stop the cards show
    clearInterval(clock);
    // Enable all buttons
    $(':button').prop('disabled', false);
    // Reset index
    index = 0;
  }, 41990);

}

var startShow = function(type, index) {
  $('#cardBack').attr('src', types[type].imgSrc + cards[index] + '.jpg');
  $('#cardBack').attr('title', types[type].name);
}

注意：您的图像需要类似于：img/hearts/Ace.jpg

希望这能有所帮助！
不要重新设计幻灯片，使用已有的40亿个插件中的一个。我不确定你在说什么插件。我所知道的是，我必须使它符合我提到的要求。你指的是什么插件？不要重新设计幻灯片，使用已有的40亿个插件中的一个首先，我不确定你在说什么插件。我所知道的是，我必须让它符合我提到的要求。你指的是什么插件？好的，我会检查一下，谢谢！我只想知道编码是如何工作的，并理解它，这样我就可以从中学习，希望能从中受益