jquery hướng dẫn xem hình ảnh đơn giản

Question

Tôi có thể tìm thấy một hướng dẫn trình chiếu hình ảnh jquery đơn giản cho người mới bắt đầu từ đầu (không có plugin) mà không có nút điều hướng bên trái và bên phải?

cảm ơn bạn.

Answer 1

lookslike này một cái gì đó bạn sẽ quan tâm đến

http://www.designchemical.com/blog/index.php/jquery/jquery-image-swap-gallery/

Answer 2

Đây là sự thích nghi của tôi về hướng dẫn Michael Soriano của. Xem bên dưới hoặc trong JSBin.

$(function() { 
 
    var theImage = $('ul#ss li img'); 
 
    var theWidth = theImage.width(); 
 
    //wrap into mother div 
 
    $('ul#ss').wrap('<div id="mother" />'); 
 
    //assign height width and overflow hidden to mother 
 
    $('#mother').css({ 
 
    width: function() { 
 
     return theWidth; 
 
    }, 
 
    height: function() { 
 
     return theImage.height(); 
 
    }, 
 
    position: 'relative', 
 
    overflow: 'hidden' 
 
    }); 
 
    //get total of image sizes and set as width for ul 
 
    var totalWidth = theImage.length * theWidth; 
 
    $('ul').css({ 
 
    width: function() { 
 
     return totalWidth; 
 
    } 
 
    }); 
 

 
    var ss_timer = setInterval(function() { 
 
    ss_next(); 
 
    }, 3000); 
 

 
    function ss_next() { 
 
    var a = $(".active"); 
 
    a.removeClass('active'); 
 

 
    if (a.hasClass('last')) { 
 
     //last element -- loop 
 
     a.parent('ul').animate({ 
 
     "margin-left": (0) 
 
     }, 1000); 
 
     a.siblings(":first").addClass('active'); 
 
    } else { 
 
     a.parent('ul').animate({ 
 
     "margin-left": (-(a.index() + 1) * theWidth) 
 
     }, 1000); 
 
     a.next().addClass('active'); 
 
    } 
 
    } 
 

 
    // Cancel slideshow and move next manually on click 
 
    $('ul#ss li img').on('click', function() { 
 
    clearInterval(ss_timer); 
 
    ss_next(); 
 
    }); 
 

 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#ss { 
 
    list-style: none; 
 
} 
 
#ss li { 
 
    float: left; 
 
} 
 
#ss img { 
 
    width: 200px; 
 
    height: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<ul id="ss"> 
 
    <li class="active"> 
 
    <img src="http://leemark.github.io/better-simple-slideshow/demo/img/colorado-colors.jpg"> 
 
    </li> 
 
    <li> 
 
    <img src="http://leemark.github.io/better-simple-slideshow/demo/img/monte-vista.jpg"> 
 
    </li> 
 
    <li class="last"> 
 
    <img src="http://leemark.github.io/better-simple-slideshow/demo/img/colorado.jpg"> 
 
    </li> 
 
</ul>

Answer 3

này đến nay là ví dụ đơn giản nhất tôi đã tìm thấy trên mạng. http://jonraasch.com/blog/a-simple-jquery-slideshow

Summaring ví dụ này, đây là những gì bạn cần làm một slideshow:

HTML:

<div id="slideshow"> 
    <img src="img1.jpg" style="position:absolute;" class="active" /> 
    <img src="img2.jpg" style="position:absolute;" /> 
    <img src="img3.jpg" style="position:absolute;" /> 
</div> 

Chức vụ tuyệt đối được sử dụng để chấm mỗi hình ảnh trong khác.

CSS

<style type="text/css"> 
    .active{ 
     z-index:99; 
    } 
</style> 

Những hình ảnh mà có class = "active" sẽ xuất hiện trên những người khác, các class = tài sản hoạt động sẽ thay đổi như sau Jquery mã.

<script> 
    function slideSwitch() { 
     var $active = $('div#slideshow IMG.active'); 
     var $next = $active.next();  

     $next.addClass('active'); 

     $active.removeClass('active'); 
    } 

    $(function() { 
     setInterval("slideSwitch()", 5000); 
    }); 
</script> 

Nếu bạn muốn đi xa hơn với trình chiếu tôi đề nghị bạn để có một cái nhìn tại liên kết ở trên (để xem những thay đổi oppacity hoạt hình - ví dụ 2n) hoặc ở trình chiếu hướng dẫn phức tạp hơn khác.

Answer 4

Tôi không biết lý do tại sao bạn havent đánh dấu trên các câu trả lời gr8 ... đây là một tùy chọn mà sẽ cho phép bạn và bất kỳ ai đến thăm để kiểm soát tốc độ chuyển tiếp và tạm dừng thời gian

JAVASCRIPT

$(function() { 

    /* SET PARAMETERS */ 
    var change_img_time  = 5000; 
    var transition_speed = 100; 

    var simple_slideshow = $("#exampleSlider"), 
     listItems   = simple_slideshow.children('li'), 
     listLen    = listItems.length, 
     i     = 0, 

     changeList = function() { 

      listItems.eq(i).fadeOut(transition_speed, function() { 
       i += 1; 
       if (i === listLen) { 
        i = 0; 
       } 
       listItems.eq(i).fadeIn(transition_speed); 
      }); 

     }; 

    listItems.not(':first').hide(); 
    setInterval(changeList, change_img_time); 

}); 

.

HTML

<ul id="exampleSlider"> 
    <li><img src="http://placehold.it/500x250" alt="" /></li> 
    <li><img src="http://placehold.it/500x250" alt="" /></li> 
    <li><img src="http://placehold.it/500x250" alt="" /></li> 
    <li><img src="http://placehold.it/500x250" alt="" /></li> 
</ul> 

.
Nếu giữ bạn này đơn giản của nó dễ dàng để giữ nó resposive tốt nhất đến thăm: DEMO

.
Nếu bạn muốn một cái gì đó với FX chuyển tiếp đặc biệt (Vẫn còn phản hồi) - hãy kiểm tra điều này ra DEMO WITH SPECIAL FX