마지막 이미지 인 경우 이미지 회전 후 숨기기

버튼을 클릭 할 때 회전 할 이미지가 3 개 있습니다.마지막 이미지 인 경우 이미지 회전 후 숨기기

image1, image2, image3.

이미지가 image1에있는 경우 클릭하면 image2 (이미지 1, .., 이미지 3의 순서대로)가 표시됩니다.

나는 image3에있을 때 이미지를 숨겨야합니다 (즉, 표시하지 않음).

이 작업을 수행하려면 javascript 함수에 대한 도움이 필요합니다. 이미 단추 클릭 이벤트에 대한 코드가 있습니다.

toggle() 함수를 jquery 객체 $('myImageID')에 전달하고 있습니다.

$(document).ready(
    function() 
    { 

     $('#button1').click(function() { toggleSector($('#sector1')) } ;    

    } 
); 

function toggleSector(o) 
    {  
     // help! 
    } 

<div id="sector1"></div> 
<input type="button" id="button1" value="Sector 1" />

업데이트 어떻게 든 내 이미지 인 <div>에 설정된 현재 배경 이미지의 이름을 찾을 수있다

현재 표시되는 이미지 이름을 가져 오는 배경 속성이 있습니까?

출처

2009-02-04 Blankman

당신은 .css(name) method에서 액세스하여 배경 이미지를 얻을 수 있습니다 :

$("#sector1").css("background-image");

를 배열 또는 다른 방식으로 이미지의 목록을 관리하지 않고, 각 배경 -을 확인해야 할거야 요소를 숨길 때를 알 수있는 이미지. 원한다면 나중에 새로운 이미지를 쉽게 추가 할 수 없기 때문에 이것은 좋은 작업 방법은 아닙니다. 다음과 같은

아마 뭔가 :

function toggle(el) { 
    var whenToHide = "background3.jpg"; 
    var currBackground = $(el).css("background-image"); 
    /* ...code... */ 
    if (currBackground == whenToHide) { 
    $(el).remove(); 
    } 
}

출처

2009-02-04 15:04:12 Sampson

당신이 배경 이미지를 사용해야합니까?
그렇지 않은 경우 여기에 약간의 코드 샘플이 있습니다.

<html> 
<head> 
<style type="text/css"> 
    #imageRotater { list-style-type:none; } 
    #imageRotater, .imageRotater li { margin:0px auto; padding: 0px; } 
    #imageRotater img { display:none; } 
</style> 

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script> 
<script type="text/javascript"> 
(function($) { 
    $.fn.rotate = function() { 
     return this.each(function() { 
      var list = $(this).is('ul') ? $(this) : $('ul', this); 
      list.find('img:eq(0)').show(); 

      $('img', list).click(function() { 
       $(this).hide().closest('li').next().find('img').show(); 
      }); 
     }); 
    }; 
})(jQuery); 


$(document).ready(function() { 
    $("#imageRotater").rotate(); 
}); 

</script> 

</head> 
<body> 
    <div id="sector1"> 
     <ul id="imageRotater"> 
      <li><img src="image1.png" alt="" /></li> 
      <li><img src="image2.png" alt="" /></li> 
      <li><img src="image3.png" alt="" /></li> 
     </ul> 
    </div> 
</body> 
</html>

출처

2009-02-04 15:20:56 bendewey

다음은 작동하는 것입니다.
각 오버레이는 처음에 CSS로 숨겨집니다. 버튼을 클릭 할 때마다 모든 오버레이가 숨겨지고 버튼에 저장된 일부 데이터를 기반으로 오버레이가 표시됩니다. 데이터가 최대 수 오버레이 + 1에 도달하면 아무 것도 표시되지 않고 데이터가 0으로 재설정됩니다.

마크 업

<div id="container" style="background: yellow"> 
    <div class="overlay" style="background: red"></div> 
    <div class="overlay" style="background: green"></div> 
    <div class="overlay" style="background: blue"></div> 
</div>

위 Bendeway의 대답에 대응하여 스타일

div{ 
    width: 100px; 
    height: 100px; 

} 
.overlay{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: none; 
} 
#container{ 
    position: relative; 
}

스크립트

$(function() { 
    var b = $('#button1'); 
    b.data('next', 0); 
    b.data('max', $('.overlay').size()+1); 
    b.click(function(e) { 
     var next = $(this).data('next'); 
     var o = $('.overlay'); 
     o.hide(); 
     o.eq(next).show(); 
     next = (next+1) % $(this).data('max'); 
     $(this).data('next', next); 
    }); 
});

출처

2009-02-04 16:13:12 meouw

, 당신은 삽입해야합니다

list.find('img:eq(0)').show();

전 0

다음 줄 그들을 통해 회전을 시작하기 전에

list.find('img').hide();

이 모든 이미지를 숨 깁니다.

출처

2009-11-24 20:05:33 KyokoHunter

마지막 이미지 인 경우 이미지 회전 후 숨기기

답변

관련 문제