这是一款效果非常炫酷的jQuery支持触摸屏的全屏响应式幻灯片特效。该幻灯片特效在大屏幕中显示信息的方式和小屏幕有所不同。它支持使用鼠标拖拽或在触摸屏中用手指滑动的方式来切换图片。同时带有一点视觉差效果,效果非常不错。
使用方法
HTML结构
该全屏响应式幻灯片特效的HTML结构如下:
JAVASCRIPT
用于驱动这个全屏响应式幻灯片特效的jQuery代码仅仅100多行,非常简单。其中autoSlide()方法用于幻灯片的自动播放。
function autoSlide() {
autoSlideTimeout = setTimeout(function () {
curSlide++;
if (curSlide > numOfSlides)
curSlide = 0;
changeSlides();
}, autoSlideDelay);
}
changeSlides()方法用于切换幻灯片。
function changeSlides(instant) {
if (!instant) {
animating = true;
manageControls();
$slider.addClass('animating');
$slider.css('top');
$('.slide').removeClass('active');
$('.slide-' + curSlide).addClass('active');
setTimeout(function () {
$slider.removeClass('animating');
animating = false;
}, animTime);
}
window.clearTimeout(autoSlideTimeout);
$('.slider-pagi__elem').removeClass('active');
$('.slider-pagi__elem-' + curSlide).addClass('active');
$slider.css('transform', 'translate3d(' + -curSlide * 100 + '%,0,0)');
$slideBGs.css('transform', 'translate3d(' + curSlide * 50 + '%,0,0)');
diff = 0;
autoSlide();
}
然后分别使用navigateLeft()和navigateRight()方法来控制向左或向右切换幻灯片。
function navigateLeft() {
if (animating)
return;
if (curSlide > 0)
curSlide--;
changeSlides();
}
function navigateRight() {
if (animating)
return;
if (curSlide < numOfSlides)
curSlide++;
changeSlides();
}
代码不是很难,仔细研究一下就能明白原理了。