没有任何插件的jQuery中的Scrollable,Carousel,Slider-最简单的方法 [英] Scrollable, Carousel, Slider in jquery without any plugin - the simplest way
本文介绍了没有任何插件的jQuery中的Scrollable,Carousel,Slider-最简单的方法的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在寻找有关带有循环动画的jQuery滑块(如可滚动插件)的教程. 没有任何插件,最简单的方法是教程
I looking-for tutorial about jQuery slider (like scrollable plugin) with cycle animation. Without any plugin, the simplest way, tutorial
推荐答案
更新时间:2014年8月27日
UPDATED: 27/08/2014
- DEMO: 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;});
}
}
});
这篇关于没有任何插件的jQuery中的Scrollable,Carousel,Slider-最简单的方法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文