自定義JQuery滑塊（自動滑動）

Question

我試圖用我自己的圖像滑塊而不使用插件。

1號問題：如何使動畫水平

第二個問題：無論圖像的大小，它必須包括高度和其容器的寬度，但保持proportionalities原始圖像。圖像可以部分渲染。如何做到這一點？

第三個問題：關於幻燈片的代碼，如果有人發現任何改進，使其更輕，更優雅，將受到歡迎。

$(function(){ 
 
    setInterval(function(){ 
 
    var displayed = $(".img-header.displayed"); 
 
    displayed.animate({opacity : 0}, 500, function() { 
 
     displayed.css("display","none"); 
 
     displayed.addClass("not-displayed").removeClass("displayed"); 
 

 
     if(displayed.next(".img-header.not-displayed").length == 0){ 
 
     $(".img-header:first").css("display","inline-block").css("opacity","1"); 
 
     $(".img-header:first").addClass("displayed").removeClass("not-displayed"); 
 
     $(".img-header:first").animate({opacity : 1}, 500); 
 
     } 
 
     else{ 
 
     displayed.next(".img-header.not-displayed").css("display","inline-block").css("opacity","1"); 
 
     displayed.next(".img-header.not-displayed").addClass("displayed").removeClass("not-displayed"); 
 
     displayed.next(".img-header.not-displayed").animate({opacity : 1}, 500); 
 
     }     
 
    }); 
 
    }, 4000); 
 
});

#slider-container{height: 200px; width: 200px;} 
 
#slider-container img.img-header{ width: 100%; height: auto;} 
 
.displayed{display: inline-block;} 
 
.not-displayed{display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="slider-container"> 
 
    <img class="img-header displayed" src="http://i.stack.imgur.com/AIHnl.png" /> 
 
    <img class="img-header not-displayed" src="http://i.stack.imgur.com/XQrms.png" /> 
 
</div>

Answer 1

我想你可能會尋找這樣的事情。

這裏的滑塊是position:relative;與top:100px;您可以根據您的要求進行設置。我仍然建議你保持它的位置相對。

滑塊有width:700px和height:500px;，您可以根據自己的要求進行更改，無論圖像的寬高比如何，或者具有不同寬高比的所有圖像都可以。

有一個array圖像加載在一個位置序列編號，所以你可能會更多的理解。我已經在JS file

中對此發表了評論您還可以根據您的要求更改滑塊速度和延遲。

當你hover在圖像就會暫停滑塊，這之後你繼續留下影像。

段：

$(document).ready(function(){ 
 

 
    var noPannel = document.getElementsByClassName("pannel").length; 
 
    var i; 
 
    var imgArr = [ ]; 
 
    var pannelWidth = $(".slider_holder").width(); 
 
    var totalWidth = noPannel*pannelWidth; 
 

 
    for (i=1;i<=noPannel;i++) 
 
    { 
 
    imgArr[i] = "http://www.picget.net/background/" + i + ".jpg"; //if you have somewhere on other path 
 

 
    //imgArr[i] = " " + i + ".jpg"; //use this if you have image in same folder/path. 
 
    } 
 
    for(i=1;i<=noPannel;i++) 
 
    { 
 
    $(".pannel:nth-child("+i+")").css("background","url("+imgArr[i]+")"); 
 
    } 
 
    function jsslider() 
 
    { 
 
    var curScroll = $(".slider").scrollLeft(); 
 
    var endScroll = totalWidth - (pannelWidth*2); 
 

 
    if(curScroll<=endScroll) 
 
    { 
 
     $(".slider").animate({scrollLeft: '+=' + pannelWidth +'px'},900,"swing");// Replace 900 for speed 
 
    } 
 
    else 
 
    { 
 
     $(".slider").animate({scrollLeft: '0px'},500,"swing"); // Replace 500 for speed to go bck to first 
 
    } 
 
    } 
 

 
    var interval = setInterval(jsslider, 3000); // Replace 3000 for delay between each slide. 
 
    $(".pannel").hover(function() { 
 
    clearInterval(interval); 
 
    }, function() { 
 
    interval = setInterval(jsslider, 3000); // Replace 3000 for delay between each slide. 
 
    }); 
 

 

 

 
}); // document.ready ENDS

html, body, * 
 
{ 
 
    margin:0px; 
 
    width:100%; 
 
    height:100%; 
 
} 
 

 
.slider_holder 
 
{ 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
    display:block; 
 
    position:relative; 
 
    top:100px; 
 
    width:1024px; 
 
    height:768px; 
 
    background:#eee; 
 
    overflow:hidden; 
 
} \t 
 

 
.slider 
 
{ 
 
    width:auto; 
 
    height:100%; 
 
    width:100%; 
 
    white-space: nowrap; 
 
    overflow:hidden; 
 
} 
 

 
.pannel 
 
{ 
 
    margin:0px; 
 
    display:inline-block; 
 
    width:100%; 
 
    height:calc(100% - 1px); 
 
    /*border:1px solid red;*/ 
 
    background-size:cover !important; 
 
    background-repeat:no-repeat; 
 
    background-position:50% 50% !important; 
 
    position:relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<body onload="sliderFunc()"> 
 
    <div class="slider_holder"> 
 
    <div class="slider"> 
 
     <span class="pannel"> </span> 
 
     <span class="pannel"> </span> 
 
     <span class="pannel"> </span> 
 
     <span class="pannel"> </span> 
 
     <span class="pannel"> </span> 
 
    </div> 
 
    </div> 
 
</body>