在没有任何插件的jquery中可滚动,旋转木马,滑块 – 最简单的方法

我正在寻找有关循环动画的jQuery滑块(如可滚动插件)的教程。 没有任何插件,最简单的方法,教程

更新日期:2014年8月27日

  • 演示: http //so.lucafilosofi.com/scrollable-carousel-slider-in-jquery-without-any-plugin-the-simplest-way
$(function() { /* author: Luca Filosofi * contact: aseptik@gmail.com * http://devilmaycode.it * license: Public * Updated: 27/08/2014 */ var animating = false, iXS = 3, $slider = $('.panel-inner'), liW = $slider.find('li:first').width(), liFW = (liW * $slider.find('li').length); $slider.width(liFW); $('.button a').on('click', function(e) { e.preventDefault(); if(!animating){ var left = Math.abs(parseInt($slider.css('left'))); var side = ($(this).data('direction') == 'right') ? (((left + (liW * iXS)) >= liFW) ? 0 : -(left + liW)) : ((left > 0) ? -(left - liW) : -(liFW - (liW * iXS))); rotate(side); } }); var rotate = function(leftY) { if(!animating){ animating = true; $slider.stop(true, true).animate({left : leftY}, 500, function(){animating = false;}); } } }); 

DEMO

https://jsfiddle.net/w9wjk22n/

我写了一些代码:

     
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

…但是当我删除第一个元素时,元素在动画后移动到左边,当我单击“下一个”几次时,元素将在蓝色容器外面。