第一個和最后一個元素的 jquery 滑塊動畫

Question

**我想要一個條件，以便滑塊不會為第一個和最后一個 li 向左和向右設置動畫。目前，當您單擊左鍵時，您將看到左側部分變為空白，因為它將為左鍵單擊的條件設置動畫，右 li 也是如此最后一個孩子到達那里時，它仍然會向右滑動，從而形成空白空間。 下面是我的代碼。 **

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

Answer 1

而不是動畫left動畫scrollLeft屬性：

帶有多個輪播的 jsFiddle 演示

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