自定义 JQuery 滑块（自动滑动）

Question

我正在尝试自己制作图像滑块而不使用插件。

第一个问题：如何制作水平动画

第二个问题：无论图片大小，它必须覆盖其容器的高度和宽度，但保持原始图像的比例。图像可以部分渲染。这个怎么做？

第三个问题：关于幻灯片的代码，如果有人发现任何改进使其更轻巧和更优雅，将受到欢迎。

$(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; 你可以根据你的要求设置。我还是建议你保持相对定位。

Slider 有 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;
} 

.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>

自定义 JQuery 滑块（自动滑动）

Custom JQuery Slider (auto-slide)

html

javascript

css

jquery

slide