클릭하면 다음 이미지로 바뀝니다 jquery html

Question

원래 전체 화면으로 반응 형 웹 사이트를 만들고 있습니다. 왼쪽에있는 콘텐츠 섹션에는 10 개의 미리보기 이미지가 있고, 오른쪽에는 기본 이미지가 있습니다. 썸네일 메인 이미지가 클릭 한 썸네일 이미지로 바뀝니다.)

320px 너비의 크기에서 모든 축소판을 제거하고 각 사진을 클릭 할 때마다 다음 이미지로 변경하고 싶습니다.

그래서 나는 css display : 아무도 320px 너비 화면에 축소판 그림을 표시하고 jquery를 사용하여 display : none = true로 설정하면 주 이미지가 클릭 가능하도록 활성화되지만 지금은 어떻게 바꿀 수 있는지 클릭 할 때마다 다음 이미지로 이동합니다. 나는 내가 아주 좋지 않기 때문에 내가 이해할 수있는 가장 단순화 된 코드에 대한 정보를 얻을 수 있기를 바란다.

내가 image1에 클릭 HTML

<div id="sectionTwo_mainPic"> 
    <img class="mainPic" src="highlight1.jpg"> 
    <img class="mainPic" src="highlight2.jpg"> 
    <img class="mainPic" src="highlight3.jpg"> 
</div> 

jQuery를

그래서 기본적으로

//if mainPic is clicked and thumbnail is not visible, change pic to next pic in order per click 
$('#sectionTwo_mainPic').on('click', function(){ 
    var test = $('.container #sectionTwo_thumbnail'); 

    if (! test.is(':visible')) { 
     // not sure what to type here 
    } 
}); 

, , 그것을 숨기고 이미지 2를 보여 클릭하고 숨기고 쇼 이미지 3 .. 등 감사

Answer 1

그래서 현재 이미지를 숨기고 다음 이미지를 표시하려면 다음과 같이 시도하십시오 (빠른 수정)이 answer의 :

$(window).load(function() { 
 
    var $slider = $("#sectionTwo_mainPic"), 
 
    $slides = $slider.find("img"), 
 
    $firstSlide = $slides.first(); 
 

 
    $(".mainPic").click(function() { 
 
    var $active = $('.active'), 
 
     $next = ($active.next().length > 0) ? $active.next() : $firstSlide; 
 
    $active.fadeOut(1000, function() { 
 
     $active.removeClass('active'); 
 
     $next.fadeIn(1000).addClass('active'); 
 
    }); 
 
    }); 
 
})

img { 
 
    position: absolute; 
 
    width: 150px; 
 
    height: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="sectionTwo_mainPic"> 
 
    <img class="mainPic active" src="http://i46.tinypic.com/2epim8j.jpg"> 
 
    <img class="mainPic" src="http://i49.tinypic.com/28vepvr.jpg"> 
 
    <img class="mainPic" src="http://i50.tinypic.com/f0ud01.jpg"> 
 
</div>

는 기본적으로 우리는 현재 슬라이드를 표시하기 위해 클래스 active을 설정합니다. 첫 번째 슬라이드 ( 또는 원하는 다른 항목)는 기본적으로 마크 업에서 클래스 active으로 지정됩니다.

사용자가 클릭 우리는 우리가 현재 슬라이드와 fadeIn() 다음 슬라이드를 fadeOut()를 사용할 수있는 경우 다음 슬라이드 다른 우리가 fadeOut() 우리는 우리가 캐시 현재 슬라이드와 fadeIn() 첫 번째 슬라이드, 사용할 수 또는 $active.next().length를 사용하지 있는지 확인 밀어 때마다 $firstSlide

---

사이드 메모 : 위의 코드는 슬라이드 쇼 (는 클릭 처리기 추가) 한 번에 모든 이미지가로드를 활성화합니다. 기다리지 않으려면 $(window).load() 대신 $(document).ready()을 사용할 수 있습니다.