时间戳

首页 > 解决方案 > 每次点击不能只改变一张图片（jquery）

jquery - 每次点击不能只改变一张图片（jquery）

问题描述

当只有一个轮播时，我可以每次点击更改一张图片。但是，当 js 中有两个或多个相同的轮播时，它会奇怪地工作。HTML：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>demo</title>
  <link href="./css/usa.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
  <div class="content">
    <div class="demo">
      <div id="stage">
        <div id="previous"></div>
        <a href="#"><img class="default" src="images/pic01.jpg" width="500" height="373" /></a>
        <a href="#"><img class="default" src="images/pic02.jpg" width="500" height="373" /></a>
        <a href="#"><img class="default" src="images/pic03.jpg" width="500" height="373" /></a>
        <a href="#"><img class="default" src="images/pic04.jpg" width="500" height="373" /></a>
        <div id="next"></div>
      </div>
    </div>


    <div class="demo">
      <div id="stage2">
        <div id="previous2"></div>
        <a href="#"><img class="default" src="images/pic01.jpg" width="500" height="373" /></a>
        <a href="#"><img class="default" src="images/pic02.jpg" width="500" height="373" /></a>
        <a href="#"><img class="default" src="images/pic03.jpg" width="500" height="373" /></a>
        <a href="#"><img class="default" src="images/pic04.jpg" width="500" height="373" /></a>
        <div id="next2"></div>
      </div>
    </div>

  </div>



  <script src="./js/stacking.js"></script>
  <script type="text/javascript">
    $(function () {
      $('#stage').stack({
        width: 300,
        height: 400
      });
    });
  </script>
  <script type="text/javascript">
    $(function () {
      $('#stage2').stack({
        width: 300,
        height: 400
      });
    });
  </script>
</body>

</html>

Javascript/Jquery：

$.fn.stack = function (options) {
    var o = $.extend({
        width: 600, // width of the Stacking Gallery Images
        height: 800, // height fo the Stacking Gallery Images
        next: '#next', // id for the Next Navigation Button
        prev: '#previous' // id for the Previous Navigation Button
    }, options);


    var stack = $("#stage"); // the id for the gallery.
    //  var stackImg    = stack.find("img"); // this selects all images from the gallery
    var stackImg = '#' + stack.attr('id') + ' img';
    //var stackImg = "#stage img";
    var count = $(stackImg).length; // counts the number of images in the gallery

    stack.width(o.width);
    stack.height(o.height);

    // to position the next and previous buttons
    $(o.next).css({
        position: 'absolute',
        top: o.height / 1.3,
        right: -10
    });
    $(o.prev).css({
        position: 'absolute',
        top: o.height / 1.3,
        left: 150
    });


    anim();

    function anim() {
        for (i = 0; i < count; i++) {
            $(stackImg).eq(count - i - 1).animate({
                width: (o.width - (i * 20)),
                bottom: 10 + (count - (i * 10)),
                right: 10 + (count - (i * 10)),
                zIndex: (count - (i + 1)),
            });
        } // for loop
    }

    $(o.next).click(function () {
        $(stackImg).eq(count - 1).detach().prependTo(stack);
        anim();
    });
    $(o.prev).click(function () {
        $(stackImg).eq(0).detach().appendTo(stack);
        anim();
    });




    //second
    var j = $.extend({
        width: 600, // width of the Stacking Gallery Images
        height: 800, // height fo the Stacking Gallery Images
        next: '#next2', // id for the Next Navigation Button
        prev: '#previous2' // id for the Previous Navigation Button
    }, options);
    var stack2 = $("#stage2"); // the id for the gallery.
    //  var stackImg    = stack.find("img"); // this selects all images from the gallery
    var stackImg2 = '#' + stack2.attr('id') + ' img';
    //var stackImg = "#stage img";
    var count2 = $(stackImg2).length; // counts the number of images in the gallery

    stack2.width(j.width);
    stack2.height(j.height);
    $(j.next).css({
        position: 'absolute',
        top: j.height / 1.3,
        right: -10
    });
    $(j.prev).css({
        position: 'absolute',
        top: j.height / 1.3,
        left: 150
    });

    anim2();

    function anim2() {
        for (a = 0; a < count2; a++) {
            $(stackImg2).eq(count2 - a - 1).animate({
                width: (j.width - (a * 20)),
                bottom: 10 + (count2 - (a * 10)),
                right: 10 + (count2 - (a * 10)),
                zIndex: (count2 - (a + 1)),
            });
        } // for loop
    }

    $(j.next).click(function () {
        $(stackImg2).eq(count2 - 1).detach().prependTo(stack2);
        anim2();
    });
    $(j.prev).click(function () {
        $(stackImg2).eq(0).detach().appendTo(stack2);
        anim2();
    });
};

标签： jqueryclickcarousel

解决方案

每个按钮有 2 个点击事件。发生这种情况是因为该函数被调用了两次。
您可以在应用点击事件的部分向您的函数添加 2 个条件来解决它。

对于第一个滑块：

if (this[0].id === "stage") {

    $(o.next).click(function () {
        $(stackImg).eq(count - 1).detach().prependTo(stack);
        anim();
    });
    $(o.prev).click(function () {
        $(stackImg).eq(0).detach().appendTo(stack);
        anim();
    });

}

对于第二个滑块：

if (this[0].id === "stage2") {

    $(j.next).click(function () {
        $(stackImg2).eq(count2 - 1).detach().prependTo(stack2);
        anim2();
    });
    $(j.prev).click(function () {
        $(stackImg2).eq(0).detach().appendTo(stack2);
        anim2();
    });

}

编辑

避免重复的更好方法。

一、脚本标签传递按钮选项：

<script type="text/javascript">

$(function () {
    $('#stage').stack({
        width: 300,
        height: 400,
        prev: "#previous",
        next: "#next"
    });
});

$(function () {
    $('#stage2').stack({
        width: 300,
        height: 400,
        prev: "#previous2",
        next: "#next2"
    });
});

</script>

jQuery：

$.fn.stack = function (options) {

    var o = $.extend({
        width: 600, // width of the Stacking Gallery Images
        height: 800, // height fo the Stacking Gallery Images
    }, options);

    var stack = $(this[0]); // the id for the gallery.
    //  var stackImg = stack.find("img"); // this selects all images from the gallery
    var stackImg = '#' + stack.attr('id') + ' img';
    //var stackImg = "#stage img";
    var count = $(stackImg).length; // counts the number of images in the gallery

    stack.width(o.width);
    stack.height(o.height);

    // to position the next and previous buttons
    $(o.next).css({
        position: 'absolute',
        top: o.height / 1.3,
        right: -10
    });
    $(o.prev).css({
        position: 'absolute',
        top: o.height / 1.3,
        left: 150
    });

    function anim() {
        for (i = 0; i < count; i++) {
            $(stackImg).eq(count - i - 1).animate({
                width: (o.width - (i * 20)),
                bottom: 10 + (count - (i * 10)),
                right: 10 + (count - (i * 10)),
                zIndex: (count - (i + 1)),
            });
        } // for loop
    }

    $(o.next).click(function () {
        $(stackImg).eq(count - 1).detach().prependTo(stack);
        anim();
    });
    $(o.prev).click(function () {
        $(stackImg).eq(0).detach().appendTo(stack);
        anim();
    });

    anim();

};

推荐阅读