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

时间：2017-10-28 00:46:28

标签： javascript jquery html

我有一个网页，显示四个按钮，一个卡片中的每个套装一个。当用户点击按钮时，它应该显示该套装的卡片图像，从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>

这是CSS：

#cardBack {
    float: left;
}

#cardFront {
    float: right;
}

h1 {
    text-align: center;
}

#my_hand{
    clear: both;
    border: 1px solid gray;
    height: 245px;
    width: 350px;
    margin: auto;
}

#controls {
    width: 100%;
    float: left;
    text-align: center;
    margin-top: 50px;
}

#btnHearts, #btnDiamonds, #btnClubs, #btnSpades{
    text-align: center;
    display: inline-block;
    padding: 20px;
}

这是我的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);   
    });
});

我很沮丧。我知道我想在Ace处开始索引为0，循环通过每一个，同时设置一个3秒的计时器。非常感谢任何帮助！

2 个答案:

答案 0 :(得分：1)

https://jsfiddle.net/Lupvk4sy/

好的，所以这里有一个非常快速的例子，你可以做到这一点。不是说这是最好的，甚至是最干净的方式，但它只是一些回调函数，它与一些自称函数相结合，以便在需要的地方保持适当的范围。

HTML 

<div>
  <img src="https://lh4.ggpht.com/FUWsXiCVl9xt1bxfdtZk7QgMQpbui_uxv7qONujjFMrf-B-aU0N4gPJ9qY5hoBsoTuo=w300" id="cover" height="100" width="100">
  <img src="http://1389blog.com/pix/happy-cat-wallpaper-thumbnail.jpg" id="1" style="display:none;" height="100" width="100">
  <img src="https://prime.peta.org/wp-content/uploads/2009/03/cateyes.thumbnail.jpg" id="2" style="display:none;" height="100" width="100">
  <img src="https://lh5.ggpht.com/z-HSdeRxdeE5ExB6VliQiKpi7o5VWQ3xpbXfs_8Q8rFO8O7sF52hGEhLNYTG7un_nw=h310" id="3" style="display:none;" height="100" width="100">
</div>
<div>
  <button id="cycle">
    Click Me to cycle stuff!
  </button>
</div>

JS（只是jQuery）

$(function() {
    var arrayOfCats = [
    $("#1"),
    $("#2"),
    $("#3")
  ];
    $("#cycle").click(progressImage);

  function progressImage() {
    $("#cycle").prop("disabled", "disabled");
    $("#cover").toggle();
        for (var x = 0; x < arrayOfCats.length; x++) {
        delay = x * 3000;
      (function(x, delay){ 
          setTimeout(function() {
            if (x > 0)
              arrayOfCats[x - 1].toggle();
            arrayOfCats[x].toggle();
            if (x === arrayOfCats.length - 1) {
                (function(x, delay){
                    setTimeout(function() {
                      arrayOfCats[x].toggle();
                      $("#cycle").prop("disabled", ""); 
                      $("#cover").toggle();
                  }, delay)
              })(x, 3000);
            }
          }, delay);
        })(x, delay);    
    }
  }
})

说明：

我做的第一件事就是禁用按钮以使for循环运行，这样我就不会进行交错切换，这会破坏屏幕上所有内容的显示方式。

然后我删除了那张“封面”照片，这张照片就像是作业的一部分，可以作为你家庭作业中甲板的背面。

然后我遍历jQuery选择器数组中的所有元素，并为它们分配一个增加的延迟（我乘以因为所有setTimeouts将在另一个之后调用1，因为它们是异步的.for循环不会等待为了让他们完成，然后继续下一个。所以基本上我告诉所有的图像“在x * 3秒时间显示你自己，当你展示自己时，隐藏上一个图像”。第一张图像立即显示（0 * 3），第二个显示自己在3秒（1 * 3）并隐藏第一个图像，第三个显示自己在6秒（2 * 3）并隐藏第二个图像。

最后我到了最后一张图片。在这里我需要告诉它在3秒后隐藏自己（并且因为3秒的setTimeout只会在完成动画后才能执行它自己的图像，它本身将花费适当的时间，我不需要制作这个（x * 3）.3秒就可以了，因为在调用该代码之前它已经等待（x * 3），此时，它只需要等待3秒。）并重新显示专辑封面，以及重新启用按钮让你再次浏览它们。

你看到这种表示法的原因

({
    // code here
})(x, delay)

是因为我需要进行自我调用功能。这是因为这里讨论的概念：setTimeout in for-loop does not print consecutive values

我不会重申，因为无论如何他们都做了很好的解释。

答案 1 :(得分：1)

我已经用另一种方式完成了它。

主要是，你需要：

  1. 每个按钮的事件侦听器
  2. 每3秒钟运行一次的计时器{{1}
  3. 计时器setInterval在所有卡片（3 * 13）
    4. 之后到期

    首先，定义：

    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); }); 函数，它激活了2个计时器，render每隔3秒运行一次......

    startShow功能：

    render

    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); } 功能：

    startShow

    注意：您的图片必须像：var startShow = function(type, index) { $('#cardBack').attr('src', types[type].imgSrc + cards[index] + '.jpg'); $('#cardBack').attr('title', types[type].name); }

    希望有所帮助！

相关问题
最新问题