全屏响应式html5+jquery幻灯片轮播特效,jQuery支持触摸屏的全屏响应式幻灯片特效...

这是一款效果非常炫酷的jQuery支持触摸屏的全屏响应式幻灯片特效。该幻灯片特效在大屏幕中显示信息的方式和小屏幕有所不同。它支持使用鼠标拖拽或在触摸屏中用手指滑动的方式来切换图片。同时带有一点视觉差效果，效果非常不错。

使用方法

HTML结构

该全屏响应式幻灯片特效的HTML结构如下：

Project name 1

....

Project link

......

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();

}

代码不是很难，仔细研究一下就能明白原理了。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！