Question

我试图在不使用插件的情况下使用自己的图像滑块。

第一个问题：如何横向制作动画

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

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

＆＃13;

$(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);
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我想你可能正在寻找这样的东西。

此处的滑块为int i = 1; while(i == 1) { int choice = input.nextInt(); switch(choice) { case 1: System.out.println("Add"); break; case 2: System.out.println("Edit"); break; case 3: System.out.println("Delete"); break; case 4: System.out.println("Search"); break; case 5: i = 2; break; default: System.out.println("Invalid Choice .. Try Again."); } }，position:relative;您可以根据自己的要求进行设置。我仍然建议你保持相对的位置。

滑块有top:100px;和width:700px，您可以根据自己的要求进行更改，无论您拥有的图像宽高比或所有具有不同宽高比的图像都适用。

要加载的图片有一个height:500px;，这些图片在一个位置进行了连续编号，因此您可以对此进行更多的了解。我在array

中对此发表了评论

您也可以根据自己的要求更改滑块速度和延迟。

当 JS file 覆盖图片时，会暂停滑块，这会在您离开图片后重新开始。

代码段

＆＃13;

hover

＆＃13;

$(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

＆＃13;

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

＆＃13;

自定义JQuery Slider（自动幻灯片）

1 个答案: