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

Question

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

这是现场演示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();

    });
});

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

Answer 1

您可以添加data-id = NUM​​BER参数，并在单击并显示+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 ？ edit = 1011

Answer 2

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

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

小提琴

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

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