javascript - 第一个和最后一个元素的 jquery slider 动画

标签 javascript jquery html css slider

**我想要一个条件，以便 slider 不会在第一行和最后一行向左和向右动画。目前，当您单击左侧时，您会看到左侧部分变为空白，因为它将为左键单击和相同的条件设置动画对于右边的最后一个 child ，当它到达那里时，它仍然会向右滑动以创建空白。下面是我的代码。 **

var container = $(".carousel_wrapper");
        var runner = container.find('ul');
        var liWidth = runner.find('li:first').outerWidth();
        var itemsPerPage = 6;
        var noofitems = runner.find('li').length;
     
       


        runner.width(noofitems * liWidth);
        container.width(itemsPerPage*liWidth);

        $('.right').click(function() {
        
        $( runner ).animate({ "left": "-=16%" }, "fast" );
        });


        $('.left').click(function() {
        
          
              
          $(runner).animate({ "left": "+=16%" }, "fast" );
             
            
        });
ul,li{ margin:0px; padding:0px;}
/**********
Timings
***********/

.DivisonHeader1{ float:left; width: 50%; padding-right: 1%; position: relative;border-right:1px solid #ccc;}
.DivisonHeader1.DivisionNew{ width: 40%;}
.DivisonHeader2.DivisionNew{ width: 60%;}
.DivisonHeader2{ float:left; width: 50%;padding:0 3%;} 
.bgSkyBlue{ background: #E7F5FF;font-family: "BentonSansMedium" !important;    border-color: #000 !important;    border-top: 1px solid #000;}
.DivisonHeader1 .Tablehaed{ font-size: 13px; margin-bottom: 0px;}
.DivisonHeader2 .Tablehaed{  margin-bottom: 0px;}
.DivisonHeader1 .Tablehaed .VDname{ width: 35%; padding-left: 0px;}
.DivisonHeader1 .Tablehaed .KPIname{ width: 20%; padding-right: 10px;}
.DivisonHeader1 .Tablehaed .Type{ width: 15%; padding-right: 10px; text-align: center;}
.DivisonHeader1 .Tablehaed .PStaff{ width: 30%; text-align: center;}
.scrollpainPoint.BCValueDriver.TimingScreen .SymbolPlus{width: 3%}
.scrollpainPoint.BCValueDriver.TimingScreen .MainSubHeading{width: 97%; border-bottom: none;}
.scrollpainPoint.BCValueDriver.TimingScreen .MainSubHeading .Mainheadp1{width: 100%}
.scrollpainPoint.BCValueDriver.TimingScreen .MainSubHeading .Mainheadp1 .Texttual{ margin-left: 5px; margin-top: 17px; font-size: 14px;}
.scrollpainPoint.BCValueDriver.TimingScreen .PointsCheck{ display: inline-block;}
.scrollpainPoint.BCValueDriver.TimingScreen .PointsCheck .CheckPoints.TimingCheckPoints{ display: inline-block; margin-top: 0px;}
.scrollpainPoint.BCValueDriver.TimingScreen .PointsCheck .CheckPoints.TimingCheckPoints:last-child{ border: none;}
.scrollpainPoint.BCValueDriver.TimingScreen .PointsCheck .CheckPoints .VdTableBc { display: inline-block; float: left;    padding-bottom: 0px; border-bottom: 0px;}
.scrollpainPoint.BCValueDriver.TimingScreen .PointsCheck .CheckPoints .VdTableBc div{ display: inline-block; float: left;}
.scrollpainPoint.BCValueDriver.TimingScreen .PointsCheck .CheckPoints .VdTableBc div.BgImprovedRange{ padding: 0px;}
.scrollpainPoint.BCValueDriver.TimingScreen .PointsCheck .CheckPoints .VdTableBc div.Type{ padding-top: 23px;}
.scrollpainPoint.BCValueDriver.TimingScreen .PointsCheck .CheckPoints .VdTableBc div.KPIname{ padding-top: 23px;}
.scrollpainPoint.BCValueDriver.TimingScreen .PointsCheck .CheckPoints .VdTableBc div.VDname{ padding: 5px 0;}
.scrollpainPoint.BCValueDriver.TimingScreen .VD_cons .SelectedVdHeads{ width: 30%;}
.scrollpainPoint.BCValueDriver.TimingScreen .VD_cons .improvedRange{ width: 100%;}
.scrollpainPoint.BCValueDriver.TimingScreen .VD_cons .SelectedVdHeads .InputtextIR{ width: 50%; margin-right: 0px; float: left;}
.scrollpainPoint.BCValueDriver.TimingScreen .PointsCheck .CheckPoints .VdTableBc div.InputtextIR{width: 50%; margin-right: 0px; float: left; background: #f2f2f2; border-right:3px solid #fff; padding: 28px 0;}
.scrollpainPoint.BCValueDriver.TimingScreen .PointsCheck .CheckPoints .VdTableBc div.InputtextIR.darkerV{background: #eaeaea; border-right: 0px;}
.TablehaedYear{ float:left; width: 100%; position: relative;}
.TablehaedYear .yearsDiv{ width: 100%;font-family: "BentonSansMedium"; text-align: center;padding-bottom: 5px;margin-bottom: 5px;font-size: 14px; float:left;}
.TablehaedYear.TableHeadYearDivs .Row1 .yearsDiv{ border-bottom: 0px solid #000;}
.TablehaedYear.TableHeadYearDivs{ border-bottom: none;}
.TablehaedYear.TableHeadYearDivs .Row1{ border-bottom: 1px solid #000; float:left; width: 100%;}
.yearsDiv1 input{ width: 70%; margin: 0px auto; display: block; border: 1px solid #000; border-radius: 5px; text-align: center;}
.TextValueDisplay{ float: left; width: 100%; text-align: center;    text-transform: uppercase;}
.YearsDivArea{ float: left; width: 100%;    padding-top: 12px; font-size: 13px;z-index: 10; position: inherit; top: auto;}
.YearsDivArea.TopAbs{    top: 275px;}
.EditHeader{ position: relative; float: right;    }
.yearsDiv .YearHeader{ display: block; border-bottom:1px solid #000; padding: 2.5px 0;    font-size: 15px; line-height: 17px;}
.TablehaedYear.TableHeadDBT .yearsDiv .YearHeader{ border-width: 2px; line-height: 18px; font-size: 14px;}
.TablehaedYear.TableHeadDBT .yearsDiv .yearsDiv1 .TextValueDisplay{ text-transform: lowercase;}
.yearsDiv .YearHeader{margin-bottom: 41px;}

.yearsDiv1{float: left;width: 100%;border-bottom: 1px solid #000;padding: 8px 0 9px 0;}
.DivisonHeaaderPositionSet{ position: relative; float: left; width: 100%;}
.TablehaedYear.owl-carousel .owl-nav .owl-prev{ position: absolute; left: -40px; top: 40%; background: url(../images/Slider_arrow_left1.png); height: 50px; background-repeat: no-repeat; background-size: contain;    width: 50px;}
.TablehaedYear.owl-carousel .owl-nav .owl-next{ position: absolute; right: -40px; top: 40%; background: url(../images/Slider_arrow_right1.png); height: 50px; background-repeat: no-repeat; background-size: contain;    width:50px;}
.ValueSpreads{ float: left; width: 100%;font-family: "BentonSansMedium"; font-size: 16px; margin-bottom: 20px;}
.ValueSpreads span{font-family: "BentonSansReg";font-size: 15px;}
.BenifitsCal{ float: left; width: 100%; padding: 10px 0; border-top: 1px solid #eaeaea;border-bottom: 1px solid #eaeaea;margin-top: 20px;}
.BenifitsCal .BenifitsHeading{ font-size: 16px;}
.BenifitsCalNoPad.totalb .BenifitsHeading{  font-size: 15px; color: rgb(15,170,255);}

.BenifitsCalNoPad.totalb .BenifitsDivison1 , .BenifitsCalNoPad.totalb .BenifitsDivison2{  font-size: 15px;font-family: "BentonSansMedium";}
.BenifitsCalNoPad{ float: left; width: 100%; padding: 7px 0; border-bottom: 1px solid #ccc;}
.BenifitsCalNoPad.totalb{ border-color:#000;}

.BenifitsCalNoPad.reccuringb{ border-color:#949494; padding-left: 10px;}
.BenifitsHeading{ float: left; width:40%;font-family: "BentonSansMedium"; padding-right: 20px;}
.BenifitsCalNoPad.SimpleRightText .BenifitsHeading{   text-align: right;font-family: "BentonSansReg";}
.BenifitsDivison{ float: left; width: 60%}
.BenifitsDivison1, .BenifitsDivison2{ float: left; width: 50%; text-align: center;}
.yearsDiv .YearHeader.NomargVS{ margin-bottom: 0px;}
.yearsDiv1.TextBorderSimple{font-family: "BentonSansReg"; border-color:#ccc;  }
.pad-top30{ margin-top: 30px !important;border-top: 0px;}
.scrollpainPoint.BCValueDriver.TimingScreen.BSTable .yearsDiv1{ padding: 7px 0;}
.yearsDiv1.TextBorderSimple.pad-top30{font-family: "BentonSansMedium";border-color:#000; }
.MtopPage{ margin-top: 75px !important;}
.MtopPage1{ margin-top: 25px !important;}

/*structure Change*/
.yearsDivHeaders ul{ float: left; width: 100%; border-bottom: 2px solid #000; padding-bottom: 5px; margin-bottom: 5px;    font-family: "BentonSansMedium"; line-height: 16px;}
.yearsDivHeaders ul li{ float: left; width: 100px; text-align: center;}
.carousel_wrapper.yearsDivHeaders{ height: 24px;}
.carousel_wrapper{ float: left; width: 100%; position: relative; height: 56px; overflow: hidden;}
.carousel_wrapper ul{font-family: "BentonSansMedium";position: absolute;    top:0px;     overflow: hidden;}
.carousel_wrapper li{ float: left; width: 100px;}
.carousel_wrapper li span.TextValueDisplay{ text-transform: lowercase;}
.carousel_wrapper li  input{  width: 70%; margin: 0px auto; display: block; border: 1px solid #000; border-radius: 5px; text-align: center;}
.FullRowAll{ border-bottom: 1px solid #ccc; float:left; width: 100%;}

.NewimingHeadDivision .VD_cons{  border-bottom: 1px solid rgb(194,229,255);}
.next{ float: right; position: relative;}
.next a{ position: absolute; top:-200px;  width: 53px; height: 52px; font-size: 0px; z-index: 100;}
.next a.left{ left: 0px;background: url(../images/Slider_arrow_left1.png);}
.next a.right{ right: -40px;background: url(../images/Slider_arrow_right1.png);}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="DivisonHeader2">
  <div class="TablehaedYear">
    <div class="carousel_wrapper yearsDivHeaders">
      <ul>
        <li><span>Year 1</span> 
        </li>
        <li><span>Year 2</span> 
        </li>
        <li><span>Year 3</span> 
        </li>
        <li><span>Year 4</span> 
        </li>
        <li><span>Year 5</span> 
        </li>
        <li><span>Year 6</span> 
        </li>
        <li><span>Year 7</span> 
        </li>
        <li><span>Year 8</span> 
        </li>
        <li><span>Year 9</span> 
        </li>
        <li><span>Year 10</span> 
        </li>
        <li><span>Year 12</span> 
        </li>
        <li><span>Year 13</span> 
        </li>
        <li><span>Year 14</span> 
        </li>

      </ul>
    </div>
  </div>
</div>
<div class="FullRowAll">
  <div class="DivisonHeader2">
    <div class="carousel_wrapper">
      <ul>
        <li class="nooo"><span class="TextValueDisplay">xx1</span>
          <input type="text" value="xx%">
        </li>
        <li><span class="TextValueDisplay">xx1</span>
          <input type="text" value="xx%">
        </li>
        <li><span class="TextValueDisplay">xx1</span>
          <input type="text" value="xx%">
        </li>
        <li><span class="TextValueDisplay">xx1</span>
          <input type="text" value="xx%">
        </li>
        <li><span class="TextValueDisplay">xx1</span>
          <input type="text" value="xx%">
        </li>
        <li><span class="TextValueDisplay">xx1</span>
          <input type="text" value="xx%">
        </li>
        <li><span class="TextValueDisplay">xx1</span>
          <input type="text" value="xx%">
        </li>
        <li><span class="TextValueDisplay">xx1</span>
          <input type="text" value="xx%">
        </li>
        <li><span class="TextValueDisplay">xx1</span>
          <input type="text" value="xx%">
        </li>
        <li><span class="TextValueDisplay">xx1</span>
          <input type="text" value="xx%">
        </li>
        <li><span class="TextValueDisplay">xx1</span>
          <input type="text" value="xx%">
        </li>
        <li><span class="TextValueDisplay">xx1</span>
          <input type="text" value="xx%">
        </li>
        <li><span class="TextValueDisplay">xx1</span>
          <input type="text" value="xx%">
        </li>
      </ul>
    </div>
  </div>
<div class="container">
  <!---------Slide Arrows-------->
  <div class=" DivisonHeader2">
    <a href="#" class="left">left</a>
    <a href="#" class="right">right</a>
  </div>

</div>
<!---------Slide Arrows-------->

最佳答案

不是为 left 设置动画，而是为 scrollLeft 属性设置动画:

jsFiddle demo with multiple carousels 

$(".carousel").each(function() {

  var $ul = $("ul", this),
      ul = $ul[0],
      $li = $ul.find("li");
  
  $(".prev, .next", this).on("click", function(evt) {
    evt.preventDefault();
    if($ul.is(":animated")) return; // Don't register clicks if it's animating
    var isNext = $(this).is(".next"),
        w = $li.width();
    $ul.animate({scrollLeft: "+="+ (isNext ? w : -w) }, 320);
  });

});
/*QuickReset*/ *{margin:0;box-sizing:border-box;}


/*
* CAROUSEL
* Styles essential just for the carousel
*/

.carousel > ul{
  padding: 0;
  list-style: none;
  overflow: hidden;
  white-space: nowrap;
}
.carousel > ul li{
  display: inline-block;
  vertical-align: top;
  white-space: normal;
  margin-right: -4px;
  width: 16.666%;
}

/* your custom styles here */
.carousel > ul li{
  text-align: center;
}
.carousel span.title{
  display:block;
  border-bottom: 2px solid #000;
  padding: 3px 5px;
}
.carousel span.tag{
  display:inline-block;
  border: 1px solid #000;
  border-radius:5px;
  padding: 3px 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="carousel">
  
  <ul>
    <li><span class="title">Year 1</span>xx1<br><span class="tag">xx%</span></li>  
    <li><span class="title">Year 2</span>xx1<br><span class="tag">xx%</span></li>
    <li><span class="title">Year 3</span>xx1<br><span class="tag">xx%</span></li>
    <li><span class="title">Year 4</span>xx1<br><span class="tag">xx%</span></li>
    <li><span class="title">Year 5</span>xx1<br><span class="tag">xx%</span></li>
    <li><span class="title">Year 6</span>xx1<br><span class="tag">xx%</span></li>
    <li><span class="title">Year 7</span>xx1<br><span class="tag">xx%</span></li>
    <li><span class="title">Year 8</span>xx1<br><span class="tag">xx%</span></li>
    <li><span class="title">Year 9</span>xx1<br><span class="tag">xx%</span></li>
    <li><span class="title">Year 10</span>xx1<br><span class="tag">xx%</span></li>
    <li><span class="title">Year 11</span>xx1<br><span class="tag">xx%</span></li>
    <li><span class="title">Year 12</span>xx1<br><span class="tag">xx%</span></li>
    <li><span class="title">Year 13</span>xx1<br><span class="tag">xx%</span></li>
  </ul>

  <button class="prev">&larr;</button>
  <button class="next">&rarr;</button>
  
</div>

关于javascript - 第一个和最后一个元素的 jquery slider 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42017820/

上一篇：javascript - 防止 Internet Explorer 滚动焦点

下一篇：html - bootstrap 3 - 将侧边栏固定为全列宽

相关文章：

javascript - 如何在加载时使用 JavaScript 设置初始 CSS 值？

javascript - 表格单元格事件监听器

javascript - e.stopPropagation() - 单击的元素是传播元素还是原始元素？

javascript - jQuery .focus() 不工作

html - 为什么我的列表项没有显示在行内 block 中？

javascript - 来自 WebGLRenderTarget 的纹理未使用 StereoEffect 渲染

javascript - React-Redux TypeError : notes. map 不是函数

javascript - 最成熟的原生 Node.js MySQL 驱动？

html - 如何将页脚粘贴到屏幕底部并防止中间部分延伸到页脚下方？

javascript - 如何在 Dojo 1.7 中使用未压缩的文件？

©2024 IT工具网  联系我们