創建滑塊和幻燈片不會重置滑動左側的位置

Question

'use strict'; 
$(function(){ 
    var width = 720; 
    var animationSpeed = 1000; 
    var pause = 3000; 
    var currentSlide = 1; 



    var $slider = $('#slider'); 
    var $slideContainer = $slider.find('.slides'); 
    var $slides = $slideContainer.find('.slide'); 
    var $slidesleft = $slideContainer.find('.left'); 
    var $slidesright = $slideContainer.find('.right'); 

    var interval; 

    function startSlider(){ 
    interval = setInterval(function(){ 
      $slideContainer.animate({'margin-left': '-='+width}, animationSpeed,function(){ 
        currentSlide++; 
        if (currentSlide === $slides.length) { 
          currentSlide = 1; 
          $slideContainer.css('margin-left', 0); 
        } 
      }); 
    },pause); 
    } 



    function stopSlider(){ 
      clearInterval(interval); 
    }; 
    $('#slidebttn').on('mouseenter', stopSlider).on('mouseleave', startSlider); 

startSlider(); 


    $('#slidebttn .right').on('click',  function(){ 
      $slideContainer.animate({'margin-left': '-='+width}, animationSpeed,function(){ 
        currentSlide++; 
        if (currentSlide === $slides.length) { 
          currentSlide = 1; 
          $slideContainer.css('margin-left', 0); 
        } 
      }); 
    }  ); 

    $('#slidebttn .left').on('click',  function(){ 
      $slideContainer.animate({'margin-left': '+='+width}, animationSpeed,function(){ 
        currentSlide--; 
        if (currentSlide === 0) { 
          currentSlide = $slides.length; 
          $slideContainer.css('margin-left', 720);  
        } 

      }); 
    }  ); 
}); 

確定這裏是我正在使用的代碼。一切正常，直到我嘗試將滑塊滑動到左側。它不會重複回到正確的位置。到目前爲止，滑動右鍵可以正常工作，沒有任何問題，但它拒絕向左滑動。任何原因，我可能不會適當地向左滑動？

Answer 1

讓我們開始吧！

對於你的html： 通常的做法是在第一個圖像之後克隆第一個圖像，然後在第一個圖像之前克隆第一個圖像，這樣就可以創建連續滑動的幻覺。你忘了把你的最後一張照片放在你的第一張照片上（您可以使用https://api.jquery.com/clone/我沒有在fiddle中）。

因此，您需要從第二張幻燈片開始，這就是爲什麼我在幻燈片元素中添加了margin-left：750px的原因。

你的CSS：一切都好。

您的javascript：請閱讀js代碼中的評論。代碼可能會更好，但我認爲它現在會更容易做到。如果您有任何問題，請不要猶豫，問問！

'use strict'; 
 
$(function() { 
 
    var width = 720; 
 
    var animationSpeed = 1000; 
 
    var pause = 3000; 
 
    var currentSlide = 1; 
 

 
    var $slider = $('#slider'); 
 
    var $slideContainer = $slider.find('.slides'); 
 
    var $slides = $slideContainer.find('.slide'); 
 
    var $slidesleft = $slideContainer.find('.left'); 
 
    var $slidesright = $slideContainer.find('.right'); 
 

 
    var interval; 
 

 
    function startSlider() { 
 
     interval = setInterval(function() { 
 
      currentSlide++; 
 
      //if this is the last image5 then go to the first image1 and current is slide 2 
 
      if (currentSlide == ($slides.length)) { 
 
       $slideContainer.css('margin-left', "-" + width + "px"); 
 
       currentSlide = 2; 
 
      } 
 
      // Go to the next slide as usual 
 
      $slideContainer.animate({ 
 
       'margin-left': "-" + (width * currentSlide) + "px" 
 
      }, animationSpeed); 
 
     }, pause); 
 
    } 
 

 

 

 
    function stopSlider() { 
 
     clearInterval(interval); 
 
    }; 
 
    $('#slidebttn').on('mouseenter', stopSlider).on('mouseleave', startSlider); 
 

 
    startSlider(); 
 

 

 
    $('#slidebttn .right').on('click', function() { 
 
     currentSlide++; 
 
     //if this is the last image5 then go to the first image1 and current is slide 2 
 
     if (currentSlide == ($slides.length)) { 
 
      $slideContainer.css('margin-left', "-" + width + "px"); 
 
      currentSlide = 2; 
 
     } 
 
     // Go to the next slide as usual 
 
     $slideContainer.animate({ 
 
      'margin-left': "-" + (width * currentSlide) + "px" 
 
     }, animationSpeed); 
 
    }); 
 

 
    $('#slidebttn .left').on('click', function() { 
 
     currentSlide--; 
 
     // Go to the prev slide as usual 
 
     $slideContainer.animate({ 
 
      'margin-left': "-" + (width * currentSlide) + "px" 
 
     }, animationSpeed, function() { 
 
      // If you are at the first image5 then go to the last and current slide is slide 6 (slides-2) 
 
      if ($slideContainer.css('margin-left') == '0px') { 
 
       $slideContainer.css('margin-left', "-" + width * ($slides.length - 2) + "px") 
 
       currentSlide = $slides.length - 2; 
 
      } 
 
     }); 
 
    }); 
 

 

 

 
});

body { 
 
    margin:0px; 
 
} 
 
@font-face { 
 
    font-family: speculum; 
 
    src: url(font/speculum.tff); 
 
} 
 
.header { 
 
    background:#c1d4ff; 
 
    margin:15px auto; 
 
    text-align:center; 
 
    height:300px; 
 
    width:relative; 
 
} 
 
.selection { 
 
    margin:10px auto; 
 
    position:relative; 
 
    height:relative; 
 
    width:relative; 
 
    min-width: 800px; 
 
} 
 
.footer { 
 
    margin:25px auto; 
 
    text-align:center; 
 
    height:150px; 
 
    width: 80%; 
 
    background: #c1d4ff; 
 
    min-width: 400px; 
 
} 
 
.itemlink { 
 
    top:75px; 
 
    position:relative; 
 
    right:228px; 
 
    float:left; 
 
} 
 
.itemlink:before { 
 
    content:"Link: " 
 
} 
 
.itemprice { 
 
    top:95px; 
 
    position:relative; 
 
    right:340px; 
 
    float:left; 
 
} 
 
.itemprice:before { 
 
    content:"Price: " 
 
} 
 
.iteminfo { 
 
    top:15px; 
 
    position:relative; 
 
    right:20%; 
 
    float:right; 
 
} 
 
.iteminfo:before { 
 
    content:"Additional Info:"; 
 
    text-decoration:underline; 
 
} 
 
.itemcode { 
 
    top:55px; 
 
    position:relative; 
 
    right:147px; 
 
    float:left; 
 
} 
 
.itemcode:before { 
 
    content:"Item Code: " 
 
} 
 
.itemname { 
 
    top:35px; 
 
    position:relative; 
 
    left:42px; 
 
    float:left; 
 
} 
 
.itemname:before { 
 
    content:"Name: " 
 
} 
 
#parts img { 
 
    border: 3px double #c1d4ff; 
 
    margin-top:20px; 
 
    float:left; 
 
    height:100px; 
 
    width:100px; 
 
} 
 
#parts { 
 
    height:150px; 
 
    margin:0 auto; 
 
    width:80%; 
 
    background:#ffffff; 
 
} 
 
#parts ul { 
 
    list-style: none; 
 
} 
 
#parts ul li { 
 
} 
 
#parts ul li ul { 
 
} 
 
#parts ul li ul li { 
 
} 
 
#main img { 
 
    margin-top:20px; 
 
    float:left; 
 
    height:100px; 
 
    width:100px; 
 
} 
 
#main { 
 
    padding-bottom:10px; 
 
    height:relative; 
 
    margin:0 auto; 
 
    width:80%; 
 
    background:#ffffff; 
 
} 
 
#main ul { 
 
    list-style: none; 
 
} 
 
#main .para { 
 
    color:#5358e5; 
 
    letter-spacing: -4px; 
 
    font-family:speculum; 
 
    text-align:justify; 
 
    padding-top:10px; 
 
    margin-right:100px; 
 
    position:relative; 
 
    left:20px; 
 
} 
 
#main .mainhead { 
 
    color:#007e32; 
 
    text-align:left; 
 
    font-family:speculum; 
 
    text-decoration:underline; 
 
    font-weight:bold; 
 
    font-size: 30px; 
 
} 
 
#sidebar { 
 
    border: 1px dashed #ffffff; 
 
    z-index:100; 
 
    position:fixed; 
 
    width:100%; 
 
    text-align:center; 
 
    background:#3366FF 
 
} 
 
#sidebar ul { 
 
    text-align: center; 
 
    display: inline; 
 
    margin: 0; 
 
    padding: 14px 4px 17px 0px; 
 
    list-style: none; 
 
} 
 
#sidebar ul li { 
 
    color:#FFFFFF; 
 
    font: bold 12px/18px sans-serif; 
 
    display: inline-block; 
 
    margin-right: -4px; 
 
    position: relative; 
 
    padding: 15px 20px; 
 
    background: #3366FF; 
 
    cursor: pointer; 
 
    -webkit-transition: all 0.8s; 
 
    -moz-transition: all 0.8s; 
 
    -ms-transition: all 0.8s; 
 
    -o-transition: all 0.8s; 
 
    transition: all 0.8s; 
 
} 
 
#sidebar ul li:hover { 
 
    background: #4775FF; 
 
    color: #FFFFFF; 
 
} 
 
#sidebar ul li.active { 
 
    color:#FFFFFF; 
 
    font: bold 12px/18px sans-serif; 
 
    display: inline-block; 
 
    margin-right: -4px; 
 
    position: relative; 
 
    padding: 15px 20px; 
 
    background: #5983FF; 
 
    cursor: pointer; 
 
    -webkit-transition: all 0.8s; 
 
    -moz-transition: all 0.8s; 
 
    -ms-transition: all 0.8s; 
 
    -o-transition: all 0.8s; 
 
    transition: all 0.8s; 
 
} 
 
#sidebar ul li.active:hover { 
 
    background: #4775FF; 
 
    color: #FFFFFF; 
 
} 
 
#sidebar ul li ul { 
 
    background: #3366FF; 
 
    padding: 0; 
 
    position: absolute; 
 
    top: 48px; 
 
    left: 0px; 
 
    width: 150px; 
 
    padding-right: 4px; 
 
    box-shadow: none; 
 
    display: none; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    -webkit-transition: all 0.8s; 
 
    -moz-transition: all 0.8s; 
 
    -ms-transition: all 0.8s; 
 
    -o-transition: all 0.8s; 
 
    transition: all 0.8s; 
 
} 
 
#sidebar ul li ul li { 
 
    background: #3366FF; 
 
    display: block; 
 
    color: #FFFFFF; 
 
} 
 
#sidebar ul li ul li:hover { 
 
    background: #4775FF; 
 
    color: #FFFFFF; 
 
} 
 
#sidebar ul li ul li.active { 
 
    background: #5983FF; 
 
    display: block; 
 
    color: #FFFFFF; 
 
} 
 
#sidebar ul li ul li.active:hover { 
 
    background: #4775FF; 
 
    color: #FFFFFF; 
 
} 
 
#sidebar ul li:hover ul { 
 
    display: block; 
 
    opacity: 1; 
 
    visibility: visible; 
 
} 
 
#slider { 
 
    z-index:1; 
 
    float:none; 
 
    margin:0 auto; 
 
    position:relative; 
 
    width:720px; 
 
    height:400px; 
 
    overflow:hidden; 
 
} 
 
#slider img { 
 
    height:400px; 
 
    width:720px; 
 
} 
 
#slider .slides { 
 
    display:block; 
 
    height:400px; 
 
    width:6000px; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
#slider .slide { 
 
    float:left; 
 
    list-style-type:none; 
 
    width:720px; 
 
    height:400px; 
 
} 
 
#slidebttn { 
 
    z-index:2; 
 
    transform:translateY(-400px); 
 
    width:800px; 
 
    position:relative; 
 
    margin:0 auto; 
 
    float:none; 
 
    height:400px; 
 
} 
 
#slidebttn .left { 
 
    position:relative; 
 
    margin:0 auto; 
 
    float:left; 
 
    height:400px; 
 
    width:40px; 
 
} 
 
#slidebttn .right { 
 
    background: transparent; 
 
    cursor:pointer; 
 
    box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75); 
 
    text-shadow: 4px 4px 5px #000000; 
 
    font-weight: bold; 
 
    line-height: 400px; 
 
    text-align: center; 
 
    position:relative; 
 
    margin:0 auto; 
 
    float:right; 
 
    height:400px; 
 
    width:40px; 
 
} 
 
#slidebttn .right:hover { 
 
    text-shadow: 1px 1px 5px #000000; 
 
    box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.75); 
 
} 
 
#slidebttn .right:active { 
 
    text-shadow: 2px 2px 5px #000000; 
 
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<body style="background-image:url(http://westquesttech.com/images/background.jpg)"> 
 
    <div id="sidebar"> 
 
     <ul> 
 
      <li class="active"><span>Home</span> 
 

 
      </li> 
 
      <li onclick="location.href='philosophy.html';"><span>Philosophy</span> 
 

 
      </li> 
 
      <li><span>Shop</span> 
 

 
       <ul> 
 
        <li onclick="location.href='shop.html';">Computers</li> 
 
        <li onclick="location.href='shop2.html';">Accessories</li> 
 
        <li onclick="location.href='shop3.html';">Parts</li> 
 
       </ul> 
 
      </li> 
 
      <li onclick="location.href='contact.html';"><span>Contact</span> 
 

 
      </li> 
 
     </ul> 
 
    </div> 
 
    </br> 
 
    </br> 
 
    <div class="header"> 
 
     <img src="http://westquesttech.com/images/westquestlogo.png"> 
 
    </div> 
 
    <div style="height:450px;" class="selection"> 
 
     <div id="slider"> 
 
      <ul class="slides" style='margin-left:-720px'> 
 
       <li class="slide"> 
 
        <img src="http://westquesttech.com/images/image5.jpg" /> 
 
       </li> 
 
       <li class="slide"> 
 
        <img src="http://westquesttech.com/images/image1.jpg" /> 
 
       </li> 
 
       <li class="slide"> 
 
        <img src="http://westquesttech.com/images/image2.jpg" /> 
 
       </li> 
 
       <li class="slide"> 
 
        <img src="http://westquesttech.com/images/image3.jpg" /> 
 
       </li> 
 
       <li class="slide"> 
 
        <img src="http://westquesttech.com/images/image4.jpg" /> 
 
       </li> 
 
       <li class="slide"> 
 
        <img src="http://westquesttech.com/images/image5.jpg" /> 
 
       </li> 
 
       <li class="slide"> 
 
        <img src="http://westquesttech.com/images/image1.jpg" /> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
     <div id="slidebttn"> 
 
      <button class="left"> 
 
       <</button> 
 
        <button class="right">></button> 
 
     </div> 
 
    </div> 
 
    <div class="footer"></div> 
 
    
 
    </html>