Question

我有一个javascript，当你点击图像时会改变图像scr，它会循环显示。我想为此脚本添加分页链接。我想要一个Previous＆amp;下一个文本链接，但我不知道如何使上一个链接返回图像和下一个链接转到下一个图像。

HTML：

<div id="container">
   <div class="nav">
            <a href="http://stackoverflow.com/"><img src="http://i.imgur.com/tL6nW.gif"></a>
            <a href="http://meta.stackoverflow.com/"><img src="http://i.imgur.com/BfZ5f.gif"></a>
            <a href="http://chat.meta.stackoverflow.com/"><img src="http://i.imgur.com/mR7wo.gif"></a>       
   </div>
</div>
<div id="d"></div>

的javascript：

$(function() {

    var $images = $("#container > .nav > a").clone();  

    var $length = $images.length;
    var $imgShow = 0;

    $("#container > .nav").html( $("#container > .nav > a:first") ); 

    $("#container > .nav > a:first").click(function(event) { 

        $(this).children().attr("src", 
                        $("img", $images).eq(++$imgShow % $length).attr("src") );

        $("#container > .nav > a:last").attr("href", $($images).eq($imgShow % $length).attr("href"));

        event.preventDefault();

    });
});

有谁能告诉我如何添加这些分页链接？

Answer 1

您可以添加 data-id = NUMBER 参数，并在点击并显示+1（下一个）或-1（上一个）时获取$(this).attr('data-id')。当前显示的图像也需要一个类来知道指针的位置。检查你什么时候去看第一个/最后一个。

完整示例

<强> HTML

<div id="container">
   <div class="nav">
            <a class="current" data-id="1" href="http://stackoverflow.com/"><img src="http://i.imgur.com/tL6nW.gif"></a>
            <a data-id="2" href="http://meta.stackoverflow.com/"><img src="http://i.imgur.com/BfZ5f.gif"></a>
            <a data-id="3" href="http://chat.meta.stackoverflow.com/"><img src="http://i.imgur.com/mR7wo.gif"></a>       
   </div>
</div>
<div id="d">
  <a class="prev" href="">Prev</a>
  <a class="next" href="">Next</a></div>

<强> CSS

a img {
  display: none;
}

a.current img {
  display: block;
}

<强> JS

$(function() {

    $("a").click(function(event) { 

        event.preventDefault();

        var pointer = $(this).attr('data-id');
        var alength = $('.nav a').length;

        if ( !$(this).hasClass('current') ) {
          var pointer = $('a.current').attr('data-id');
          $('a.current').removeClass('current');
        }

        if ($(this).hasClass('prev')){
          $('a.current').removeClass('current');
          pointer--;
          if (pointer < 1) { pointer = alength; }

        } else {
          $(this).removeClass('current');

          pointer++;
          if (pointer > alength) { pointer = 1; }
        }


        $('a[data-id="'+pointer+'"]').addClass('current'); 

    });
});

Codepen ：https://codepen.io/anon/pen/AXGGPJ?editors=1011

Answer 2

我正在玩类似的东西，并且认为我会分享它，以防它对你有用，不同的想法如何去做。

＆＃13;

/* set first image in frame from shoebox on document.ready */
$(function() {
  var leadOff = $('shoebox img:first-child').attr('source');
	$('.picture').attr({'src' : leadOff, 'imageposition' : '1'});
});
/* load next image from shoebox (click on image and/or next button) */
$('pictureframe, buttonright').click(function() {
  var imageTally = $('shoebox img').length;
	var imagePosition = $('.picture').attr('imageposition');
  var plusOne = parseInt(imagePosition) + 1;
  var nextUp = $('shoebox img:nth-child(' + plusOne + ')').attr('source');
  if (imagePosition == imageTally) {
    var leadOff = $('shoebox img:first-child').attr('source');
    $('.picture').attr({'src' : leadOff, 'imageposition' : '1'});
  } else {
    $('.picture').attr({'src' : nextUp, 'imageposition' : plusOne});
  }
});
/* load previous image from shoebox (click on prev button) */
$('buttonleft').click(function() {
  var imageTally = $('shoebox img').length;
	var imagePosition = $('.picture').attr('imageposition');
  var minusOne = parseInt(imagePosition) - 1;
  var nextUp = $('shoebox img:nth-child(' + minusOne + ')').attr('source');
  if (imagePosition == '1') {
    var lastPic = $('shoebox img:last-child').attr('source');
    $('.picture').attr({'src' : lastPic, 'imageposition' : imageTally});
  } else {
    $('.picture').attr({'src' : nextUp, 'imageposition' : minusOne});
  }
});

＆＃13;

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}
wall {
  display: flex;
  flex-direction: column;
  padding: 6px;
  background-color: hsla(0, 0%, 20%, 1);
}
pictureframe {
  display: flex;
  padding: 6px;
  background-color: hsla(0, 0%, 40%, 1);
}
pictureframe img {
  display: flex;
  width: 100px;
  height: 100px;
}
buttonswrapper {
  display: flex;
  flex-grow: 1;
}
buttonleft, buttonright {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  padding: 6px;
  color: hsla(40, 20%, 70%, 1);
  font-variant: small-caps;
  font-weight: bold;
  font-family: Verdana, sans-serif;
  background-color: hsla(0, 0%, 40%, 1);
  cursor: pointer;
}
buttonleft:hover, buttonright:hover {
  background-color: hsla(50, 50%, 40%, 1);
}
shoebox {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<wall>
  <pictureframe>
    <img class="picture" src="">
  </pictureframe>
  <buttonswrapper>
    <buttonleft>prev</buttonleft>
    <buttonright>next</buttonright>
  </buttonswrapper>
</wall>
<shoebox>
  <!-- prevent loading all images by changing src to source -->
  <img source="http://i.imgur.com/tL6nW.gif">
  <img source="http://i.imgur.com/BfZ5f.gif">
  <img source="http://i.imgur.com/mR7wo.gif">  
</shoebox>

＆＃13;

<强>拨弄

http://jsfiddle.net/Hastig/bjw9rpo0/8/

让我知道是否需要注释，如果你需要href，我也有一些想法。

添加分页链接到onclick更改图像

2 个答案: