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

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

Answer 1

更新日期：2014年8月27日

• 演示： http ： //so.lucafilosofi.com/scrollable-carousel-slider-in-jquery-without-any-plugin-the-simplest-way

$(function() { /* author: Luca Filosofi * contact: [e-mail] * 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;}); } } }); 

Answer 2

DEMO

https://jsfiddle.net/w9wjk22n/

我写了一些代码：

    next 
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
  

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