将分页链接添加到单击更改图像的功能中

Question

我可以帮您翻译成中文。这是一段关于Javascript的内容，当你点击图片时，它会循环更改图片源。我想在这个脚本中添加分页链接。我想要一个“上一页”和“下一页”的文本链接，但我不知道如何使“上一页”链接返回到上一张图片，“下一页”链接前往下一张图片。

以下是现场演示链接 http://jsfiddle.net/08p52h59/3/ 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();

    });
});

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

- TravelWhere

Answer 1

我曾经也尝试过类似的东西，想和你分享一下，如果对你有用的话，这里有不同的实现思路。

/* 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});
  }
});

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;
}

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

fiddle

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

如果需要注释或者需要href，我有一些想法，请告诉我。

- Hastig Zusammenstellen

Answer 2

你可以添加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

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

（说明：Codepen是一个在线代码编辑器，可用于创建、分享和发现web开发项目。链接为一个示例代码的页面）

- user5201742