問題與JQuery滑塊

我做了一個滑塊使用Jquery的功能正常，但只要它到達最後一張幻燈片，它不會滑過第一個幻燈片，而是它只是瞬間顯示第一張幻燈片。即使是一秒鐘也不會停留在最後一張幻燈片上。問題與JQuery滑塊

HTML：

<body> 
    <div id="container"> 
     <div id="header"> 
      <h3>J-Slider</h3> 
     </div> 
     <div class="slider"> 
      <ul> 
       <li> 
        <img width="750px" height="400px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/space-wallpapers-1.jpg"> 
       </li> 
       <li> 
        <img width="750px" height="400px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/space-wallpapers-13.jpg"> 
       </li> 
       <li> 
        <img width="750px" height="400px" src="http://th08.deviantart.net/fs70/PRE/f/2014/071/5/5/blue_space_by_whendell-d79zabi.jpg"> 
       </li> 
      </ul> 
     </div> 
    </div> 
</body>

CSS：

body { 
    font-family:Gerogia; 
    font-size:15px; 
} 
#container { 
    width:930px; 
    margin:50px auto 10px auto; 
    border-left:#666 solid 3px; 
    border-right:#666 solid 3px; 
    background:#f5f5f5; 
    padding:20px 30px; 
} 
#header { 
    padding:10px 0; 
    border-bottom:#ccc solid 1px; 
    overflow:hidden; 
    text-align:center; 
} 
h3 { 
    font-size: 30px; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
} 
.slider { 
    width: 750px; 
    height: 400px; 
    padding-top: 10px; 
    margin-left: 75px; 
    overflow: hidden; 
} 
.slider ul { 
    width:8000px; 
    list-style-type:none; 
} 
.slider li { 
    float: left; 
}

JQuery的：

$('document').ready(function() { 
    var width = 750; 
    var animationSpeed = 1000; 
    var pause = 3000; 
    var currentSlide = 1; 

    var $slider = $('.slider'); 
    var $slideContainer = $slider.find('ul'); 
    var $slides = $slideContainer.find('li'); 

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

來源

2014-07-14 DineshS

它應該像它那樣自動滑動，還是要點擊功能？你想讓幻燈片回到第一張圖片，還是想讓最後一張圖片淡出，然後第一張圖片再次淡入？沒有更多信息很難提供幫助 – Izekid

請檢查jsfiddle的代碼。或以下代碼

也許你的解決方案。

$('document').ready(function() { 
var width = 750; 
var animationSpeed = 1000; 
var pause = 3000; 
var currentSlide = 1; 

var $slider = $('.slider'); 
var $slideContainer = $slider.find('ul'); 
var $slides = $slideContainer.find('li'); 

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


}, pause); 
       } 
      }); 
     }, pause); 
    });

來源

2014-07-14 12:33:42

謝謝。但是有什麼辦法可以讓滑塊停留在最後一張圖片上幾秒鐘（比如2秒）。正如您在看到最後一張圖片時所看到的那樣，它立即滑回第一張圖片。我嘗試了delay（）函數，但它與第一張幻燈片動畫的時間混淆。 – DineshS

@DineshS請檢查此鏈接[jsfiddle]（http://jsfiddle.net/prashantptapase/ymFQR/26/）。第三次滑動，停止3秒。 –

@DineshS試試這個[jsfiddle]（http://jsfiddle.net/prashantptapase/ymFQR/27/） –

嘗試改變如何以及何時增加幻燈片，當你重置爲一個。在當前的JS，你遞增到最後一張幻燈片，然後告訴它回到一個馬上

$('document').ready(function() { 
    var width = 750; 
    var animationSpeed = 1000; 
    var pause = 3000; 
    var currentSlide = 1; 

    var $slider = $('.slider'); 
    var $slideContainer = $slider.find('ul'); 
    var $slides = $slideContainer.find('li'); 

    setInterval(function() { 
    $slideContainer.animate({ 
     'margin-left': '-=' + width + 'px' 
    }, animationSpeed, function() { 
     if (currentSlide === $slides.length) { 
      currentSlide = 1; 
      $slideContainer.css('margin-left', 0); 
     } else { 
      currentSlide++; // move this down here 
     } 
    }); 
}, pause); 
});

來源

2014-07-14 12:18:58 mmeasor

我不是在Javascript親，但我認爲我想通你的問題。

當您製作動畫時，您執行currentSlide ++，並且在您執行檢查（currentSlide == $ slides）之後，您將迭代currentSlide，然後在您告訴他更改爲第一個之後。正如之前所說的mmseasor一樣。

對於你不回頭的問題是因爲在if循環中的動作中你忘了給slideContainer設置動畫，所以它只顯示。

來源

2014-07-14 12:23:28 Lucas

我改變你的代碼了一下，我把第一個元素的副本在最後的位置，並修改你的代碼有點

$('document').ready(function() { 
    var width = 750; 
    var animationSpeed = 1000; 
    var pause = 3000; 
    var currentSlide = 1; 

    var $slider = $('.slider'); 
    var $slideContainer = $slider.find('ul'); 
    var $slides = $slideContainer.find('li'); 

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

變化

if (currentSlide === $slides.length)

要：

if (currentSlide >= $slides.length)

舉例：jsFiddle

更新：問題與圖像邊框左側

爲了讓所有的工作我修改你的CSS（放左旁UL爲0px）

.slider ul { 
    width:8000px; 
    list-style-type:none; 
    padding-left: 0px 
}

更新的jsfiddle： jsFiddle

來源

2014-07-14 12:43:50 Steven

問題與JQuery滑塊

回答

相關問題