onclick 변경 이미지에 페이지 매김 링크 추가하기

Question

이미지를 클릭하면 이미지 scr을 변경하는 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> 

자바 스크립트 :

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

.

/* set first image in frame from shoebox on document.ready */ 
 
$(function() { 
 
    var leadOff = $('shoebox img:first-child').attr('source'); 
 
\t $('.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; 
 
\t 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; 
 
\t 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의의를 필요로하는 경우 나뿐만 아니라 그것에 대한 몇 가지 아이디어를 보자.

Answer 2

클릭하면 +1 (다음) 또는 -1 (이전)을 표시 할 때 데이터 ID = NUMBER 매개 변수를 추가하고 $(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