Rất đơn giản hình ảnh trượt/Slideshow với nút trái và phải. Không tự động phát

Question

Tôi đang cố gắng tạo một thanh trượt/slideshow hình ảnh rất đơn giản mà không cần tự động phát. Tôi chỉ muốn chuyển đến hình ảnh tiếp theo hoặc trước khi nhấp chuột. Có một số vấn đề bạn có thể đọc bên dưới.

Đây là jsFiddlehttp://jsfiddle.net/HsEne/12/ (tôi chỉ sử dụng màu nền thay vì hình ảnh trong fiddle cũng như chuyển img để divs nhưng đó là cùng một vấn đề chính xác tất nhiên)

HTML:

<div id="slider-wrapper"> 

<div id="slider"> 
<img class="sp" src="/img1.jpg"> 
<img class="sp" src="/img2.jpg"> 
<img class="sp" src="/img3.jpg"> 
<img class="sp" src="/img4.jpg"> 
<img class="sp" src="/img5.jpg"> 
<img class="sp" src="/img6.jpg"> 
</div> 

<img id="button-previous" src="/button-arrow-left.jpg"> 
<img id="button-next" src="/button-arrow-right.jpg"> 
</div> 

CSS:

#slider-wrapper { 
display: block; 
max-width: 790px; 
margin: 5% auto; 
max-height: 500px; 
height: 100%; } 

#slider { 
display: block; 
position: relative; 
z-index: 99999; 
max-width: 710px; 
width: 100%; 
margin: 0 auto; } 

#button-previous { 
position: relative; 
left: 0; 
margin-top: 40%; 
width: 40px; 
height: 60px; } 

#button-next { 
position: relative; 
margin-top: 40%; 
float: right; } 

.sp { 
position: absolute; } 

#slider .sp { 
max-width: 710px; 
width: 100%; 
max-height: 500px; } 

jQuery cho nút tiếp theo:

jQuery("document").ready(function(){ 
    jQuery("#slider > img:gt(0)").hide(); 
    jQuery("#button-next").click(function() { 
     jQuery("#slider > img:first") 
    .fadeOut(1000) 
    .next() 
    .fadeIn(1000) 
    .appendTo("#slider"); 
    }); 
}); 

Trên đây jQuery hoạt động tốt, ngoại trừ nó bỏ qua hình ảnh đầu tiên nếu người dùng nhấp vào nút bên cạnh trên slide cuối cùng. Nó chỉ hiển thị hình ảnh đầu tiên một lần, tất cả các hình ảnh khác sẽ tiếp tục trượt mỗi lần nhấp tiếp theo. Đối với một số lý do hiển thị: không ai được thêm vào hình ảnh đầu tiên nhưng tôi không biết mã đó đến từ đâu.

jQuery cho nút trước:

jQuery("document").ready(function(){ 
    jQuery("#slider > img:gt(0)").hide(); 
    jQuery("#button-previous").click(function() { 
     jQuery("#slider > img:last") 
    .fadeOut(1000) 
    .next() 
    .fadeIn(1000) 
    .appendTo("#slider"); 
    }); 
}); 

mã jquery này trên sẽ trả lại hình ảnh chỉ xem trước như nó nên. Nhưng khi được nhấp một lần nữa nó không làm gì cả.

Tôi cũng đã thử .prev() thay thế .next(). Nó hoạt động tốt lần đầu tiên bạn bấm vào nút trước đó. Giả sử chúng ta đang xem Hình ảnh số 4. Khi tôi nhấp vào nút trước đó, nó sẽ chuyển đến Hình ảnh số 3, giống như nó. Nhưng khi nhấp vào nó một lần nữa nó không đi đến hình ảnh # 2, nó quay trở lại hình ảnh # 4, và sau đó # 3 và sau đó # 4, lặp lại chính nó.

Answer 1

Sau khi đọc bình luận của bạn về câu trả lời trước đây của tôi, tôi nghĩ tôi có thể đưa điều này như một câu trả lời riêng biệt.

Mặc dù tôi đánh giá cao cách tiếp cận của bạn để cố gắng thực hiện nó theo cách thủ công để nắm bắt tốt hơn jQuery Tôi vẫn nhấn mạnh công đức trong việc sử dụng các khung công tác hiện có.

Điều đó nói rằng, đây là giải pháp.Tôi đã sửa đổi một số css và và HTML của bạn chỉ để làm cho nó dễ dàng hơn cho tôi để làm việc với

WORKING JS FIDDLE - http://jsfiddle.net/HsEne/15/

Đây là jQuery

$(document).ready(function(){ 
$('.sp').first().addClass('active'); 
$('.sp').hide();  
$('.active').show(); 

    $('#button-next').click(function(){ 

    $('.active').removeClass('active').addClass('oldActive');  
        if ($('.oldActive').is(':last-child')) { 
     $('.sp').first().addClass('active'); 
     } 
     else{ 
     $('.oldActive').next().addClass('active'); 
     } 
    $('.oldActive').removeClass('oldActive'); 
    $('.sp').fadeOut(); 
    $('.active').fadeIn(); 


    }); 

     $('#button-previous').click(function(){ 
    $('.active').removeClass('active').addClass('oldActive');  
      if ($('.oldActive').is(':first-child')) { 
     $('.sp').last().addClass('active'); 
     } 
      else{ 
    $('.oldActive').prev().addClass('active'); 
      } 
    $('.oldActive').removeClass('oldActive'); 
    $('.sp').fadeOut(); 
    $('.active').fadeIn(); 
    }); 




}); 

Vì vậy, bây giờ là lời giải thích.
Giai đoạn 1
1) Tải tập lệnh trên tài liệu đã sẵn sàng.

2) Lấy trang chiếu đầu tiên và thêm một lớp 'hoạt động' vào nó để chúng tôi biết chúng tôi đang xử lý trang trình bày nào.

3) Ẩn tất cả trang trình bày và hiển thị trang trình bày đang hoạt động. Vì vậy, bây giờ slide # 1 là khối hiển thị và tất cả các phần còn lại được hiển thị: none;

Giai đoạn 2 Làm việc với sự kiện nhấp chuột vào nút tiếp theo.
1) Xóa lớp đang hoạt động hiện tại khỏi trang trình bày sẽ biến mất và đặt lớp đó là oldActive để chúng tôi biết rằng nó đang ở trên đó.

2) Tiếp theo là câu lệnh if để kiểm tra xem chúng tôi có đang ở cuối trình chiếu hay không và cần quay lại bắt đầu lại. Nó sẽ kiểm tra xem oldActive (tức là trang trình bày đi) là đứa trẻ cuối cùng. Nếu có, sau đó quay trở lại đứa trẻ đầu tiên và làm cho nó 'hoạt động'. Nếu đó không phải là đứa trẻ cuối cùng, thì chỉ cần lấy phần tử tiếp theo (sử dụng .next()) và cho lớp đó hoạt động.

3) Chúng tôi xóa lớp cũHoạt động vì nó không còn cần thiết nữa.

4) fadeOut tất cả các slide

5) phai Trong slide hoạt động

Bước 3

Tương tự như trong bước hai nhưng sử dụng một số logic ngược để vượt qua thông qua các yếu tố ngược .

Điều quan trọng cần lưu ý là có hàng nghìn cách để bạn có thể đạt được điều này. Đây chỉ là vấn đề của tôi về tình hình.

Answer 2

Tại sao thử phát minh lại bánh xe? Có nhiều giải pháp trình chiếu jQuery nhẹ hơn ở đó, bạn có thể chọc một cây gậy, và ai đó đã thực hiện công việc khó khăn cho bạn và nghĩ về các vấn đề mà bạn có thể gặp phải (tính tương thích giữa các trình duyệt, v.v.).

jQuery Cycle là một trong những thư viện trọng lượng nhẹ yêu thích của tôi.

gì bạn muốn đạt được có thể được thực hiện chỉ trong

jQuery("#slideshow").cycle({ 
    timeout:0, // no autoplay 
    fx: 'fade', //fade effect, although there are heaps 
    next: '#next', 
    prev: '#prev' 
    }); 

JSFIDDLE TO SEE HOW EASY IT IS

Answer 3

Mã rất đơn giản để tạo thanh trượt jquery Đây là hai div đầu tiên là trình xem thanh trượt và thứ hai là vùng chứa danh sách hình ảnh. Chỉ cần sao chép dán mã và tùy chỉnh với css.

<div class="featured-image" style="height:300px"> 
    <img id="thumbnail" src="01.jpg"/> 
    </div> 

    <div class="post-margin" style="margin:10px 0px; padding:0px;" id="thumblist"> 
    <img src='01.jpg'> 
    <img src='02.jpg'> 
    <img src='03.jpg'> 
    <img src='04.jpg'> 
    </div> 

    <script type="text/javascript"> 
      function changeThumbnail() 
      { 
      $("#thumbnail").fadeOut(200); 
      var path=$("#thumbnail").attr('src'); 
      var arr= new Array(); var i=0; 
      $("#thumblist img").each(function(index, element) { 
       arr[i]=$(this).attr('src'); 
       i++; 
      }); 
      var index= arr.indexOf(path); 
      if(index==(arr.length-1)) 
      path=arr[0]; 
      else 
      path=arr[index+1]; 
      $("#thumbnail").attr('src',path).fadeIn(200); 
      setTimeout(changeThumbnail, 5000); 
      } 
      setTimeout(changeThumbnail, 5000); 
    </script> 

Answer 4

<script type="text/javascript"> 
        $(document).ready(function(e) { 
         $(".mqimg").mouseover(function() 
         { 
          $("#imgprev").animate({height: "250px",width: "70%",left: "15%"},100).html("<img src='"+$(this).attr('src')+"' width='100%' height='100%' />"); 
         }) 
         $(".mqimg").mouseout(function() 
         { 
          $("#imgprev").animate({height: "0px",width: "0%",left: "50%"},100); 
         }) 
        }); 
        </script> 
        <style> 
        .mqimg{ cursor:pointer;} 
        </style> 
        <div style="position:relative; width:100%; height:1px; text-align:center;">`enter code here` 
        <div id="imgprev" style="position:absolute; display:block; box-shadow:2px 5px 10px #333; width:70%; height:0px; background:#999; left:15%; bottom:15px; "></div> 
<img class='mqimg' src='spppimages/1.jpg' height='100px' /> 
<img class='mqimg' src='spppimages/2.jpg' height='100px' /> 
<img class='mqimg' src='spppimages/3.jpg' height='100px' /> 
<img class='mqimg' src='spppimages/4.jpg' height='100px' /> 
<img class='mqimg' src='spppimages/5.jpg' height='100px' />