이미지 갤러리의 다음/이전 버튼

지금 바로 이미지 갤러리를 통해 사용자가 미리보기 이미지를 클릭하면 해당 div의 스타일이 차단되고 나머지는 숨겨집니다. 추가 탐색을 위해 다음/이전 단추를 추가 할 수 있기를 원합니다.이미지 갤러리의 다음/이전 버튼

제 생각에 getElementByAttribute를 사용하여 'style = "표시가있는 유일한 이미지를 찾았습니다 : block"'그리고 나서 어떻게 든 div에 하나를 더하거나 뺍니다. 그러나 나는 잃어버린 두려워. 어떤 충고?

현재 코드 :

자바 스크립트에서

<div id="image1" style="display:block"><img src="resources/images/larges/01.jpg"></div> 
<div id="image2" style="display:none"><img src="resources/images/larges/02.jpg"></div> 
. . . 

<img style='cursor:pointer;' onclick="showDiv(1)" src="resources/images/thumbs/01.jpg"> 
<img style='cursor:pointer;' onclick="showDiv(2)" src="resources/images/thumbs/02.jpg"> 
. . . 

<script type = "text/javascript">  
    function showDiv(which) { 
    for(i = 0; i < 13; i++) { 
     document.getElementById("image"+i).style.display="none"; 
    } 
     document.getElementById("image" + which).style.display = "block"; 
    } 
</script>

출처

2012-02-21 ENev

당신은 당신이 주어진 PARAM으로 업데이트를 함수에 currentImage를 두 개의 버튼,

<button type="button" onclick="showDiv(currentImage - 1)">Previous</button> 
<button type="button" onclick="showDiv(currentImage + 1)">Next</button>

를 추가,

var currentImage = 1; //assuming the 1st image shown is always the first

다음 전역 변수를 선언 할 수

function showDiv(which) { 
    for(i = 0; i < 13; i++) { 
     document.getElementById("image"+i).style.display="none"; 
    } 
    //in the next 2 lines, you make sure which isn't lower than 1, and isn't greater than the number of images 
    if(which < 1) which = 1; 
    if(which > 13) which = 13; 
    document.getElementById("image" + which).style.display = "block"; 
    currentImage = which; 
}

출처

2012-02-21 22:23:52

흠, 내가 뭔가를 놓치지 않는 한, 나는 이것이 작동 할 것이라고 생각하지 않는다. 내 "onclick"속성은 함수에 정수를 제공해야합니다. – ENev

죄송합니다. html 섹션을 '코딩하지 않았습니다' –

그게 훨씬 의미가 있습니다. 고마워요! – ENev

(위의 코드에서, 예를 들어, 그것은 'imagei'입니다) 현재 표시되는 DIV 의미 전역 변수 i을 선언합니다. 사용자가 div image4의 미리보기 이미지를 클릭하면 i을 4 등으로 설정합니다.

이제 이전/다음 버튼의 경우 현재 값 i을 알고 있으므로 어떤 div가 표시되는지 알 수 있습니다. i을 증가 또는 감소시켜 시퀀스의 다음 div를 표시합니다.

하나의 div 만 사용하려는 경우 다음/이전 버튼을 포함하여 갤러리의 전체 자바 스크립트 코드를 복사 할 수있는 곳에서 here's a blog post을 가져옵니다.

출처

2012-02-21 22:22:10

나는 스크립트에 어떤 스크립트가 표시되는지 알 수 없습니다. 함수에 대한 제안? – ENev

내 대답의 두 번째 문장은 어떻게하는지 알려줍니다. –

왜 하나의 div 만 사용하여 큰 것을 표시하지 않습니까? (이것은 jquery를 지원합니다)

아이디어는 표시하려는 이미지 만 변경하고 다른 이미지는 숨기지 않습니다. 그는 너무 동영상이 될 것이라고 말했다 때문에 : http://jsfiddle.net/x6W8m/ 가 완벽하지 않지만 비트를 표시해야합니다 당신은 (그들이 데이터 -로 시작하는 경우 허용) 다음 버튼 속성으로

<div style="display:block"><img id="largeimg" data-nr="1" src="resources/images/larges/01.jpg"></div> 
<img data-nr="1" class="clickable" style='cursor:pointer;' src="resources/images/thumbs/01.jpg"> 
<img data-nr="2" class="clickable" style='cursor:pointer;' src="resources/images/thumbs/02.jpg"> 
. . . 

<script type = "text/javascript">  
    $(document).ready(function(){ 
    $(".clickable").each(function({ 
     this.click(function(){ 
     $("#largeimg").attr("src",this.attr("src")).attr("data-nr",this.attr("data-nr")); 
     } 
    } 
    }); 
    function nextpic() { 
    newid = parseInt($("#largeimg").attr("data-nr"))+1; 
    newsrc = $(".clickable[data-nr="+newid+"]").attr("src"); 
    $("#largeimg").attr("src",newsrc).attr("data-nr",newid); 
    } 
</script>

편집을 실제 저장할 수 있습니다 :)

출처

2012-02-21 22:24:20 Neysor

내 div 중 하나는 이미지 대신

오, 좋아요, 거의 동일하게 작동합니다! 곧 게시 할 예정이며, 더 많은 시간이 필요합니다 :) – Neysor

하지만 jQuery는 괜찮습니까[email protected] – Neysor

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>Next and Previous Button</title> 
    <link rel="stylesheet" href=""> 
</head> 
<body> 

<img src="images.jpg" id="imgDemo" alt="HTML5 Icon" width="128" height="128"> 

       <button onclick="nxt()" id="btnOne">next</button> 
       <button onclick="prvs()" id="btnTwo">previous</button> 

<script> 

var img = new Array("images.jpg","images1.jpg","images2.jpg","images3.jpg","images4.jpg","images5.jpg","images6.jpg","images7.jpg","images8.jpg"); 

var imgElement = document.getElementById("imgDemo"); 
var i = 0; 
var imgLen = img.length; 

     function nxt() 
     { 
      if(i < imgLen-1) 
       { 
        i++; 
       } 
      else{ 
        i=0;     
       } 

       imgElement.src = img[i];      
     } 

     function prvs() 
     { 
      if(i > 0) 
       { 
        i--; 
       } 
      else 
      { 
       i = imgLen-1; 
      } 
       imgElement.src = img[i];      
     } 

</script> 

</body> 
</html>

출처

2015-03-02 03:25:09 bvmCoder

이미지 갤러리의 다음/이전 버튼

답변

관련 문제