html5怎么弹性展开代码,html5 css3弹性过渡上下全屏翻页代码

特效描述：html5 css3 弹性过渡 上下全屏翻页。html5全屏翻页代码

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

jQuery和CSS3炫酷弹性过渡全屏翻页特效 Elastic Full-window Page Slider With jQuery And CSS3

Section 2

Section 3

Section 4

适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。

来源：哇网

$('.wrapper').each(function() {

var $slider = $(this);

var numberOfSlides = $slider.find('.panel').length;

$slider.find('.panel:eq(0)').addClass('_active');

$slider.find('.nav-dot:eq(0)').addClass('active');

var $activeSlide = $slider.find('.panel._active');

var $nextBtn = $slider.find('.next-btn');

var $prevBtn = $slider.find('.prev-btn');

$('.nav-dot').on('click', function() {

var slideToGo = $(this).data('slide');

goToSlide(slideToGo);

});

$slider.on('slide.changed', function() {

console.log('slide changed !');

$('.nav-dot').removeClass('active');

var $activeDot = $('.nav-dot[data-slide="'+$('.panel._active').data('slide')+'"]');

$activeDot.addClass('active');

});

$nextBtn.on('click', function(event) {

nextSlide();

});

$prevBtn.on('click', function(event) {

prevSlide();

});

function nextSlide() {

$activeSlide = $slider.find('.panel._active');

var $nextSlide = $activeSlide.next('.panel');

$activeSlide.removeClass('_active');

$nextSlide.addClass('_active');

//$activeSlide = $nextSlide;

var slideIndex = $slider.find('.panel._active').index('.panel');

console.log(slideIndex);

if(slideIndex >= numberOfSlides || slideIndex <= -1 ) {

firstSlide();

$slider.trigger('slide.changed');

}else {

$slider.trigger('slide.changed');

}

}

function prevSlide() {

$activeSlide = $slider.find('.panel._active');

var $prevSlide = $activeSlide.prev('.panel');

//console.log($prevSlide);

$activeSlide.removeClass('_active');

$prevSlide.addClass('_active');

//$activeSlide = $prevSlide;

var slideIndex = $slider.find('.panel._active').index();

console.log(slideIndex);

if(typeof $prevSlide === 'undefined'|| $prevSlide === null || $prevSlide.length == -1 || slideIndex <= -1 ) {

lastSlide();

$slider.trigger('slide.changed');

} else {

$slider.trigger('slide.changed');

}

}

function firstSlide() {

$('.panel._active').removeClass('_active');

$slider.find('.panel:eq(0)').addClass('_active');

$activeSlide = $slider.find('.panel:eq(0)');

}

function lastSlide() {

//console.log('last');

$('.panel._active').removeClass('_active');

$slider.find('.panel').eq(numberOfSlides-1).addClass('_active');

//$activeSlide = $slider.find('.panel:eq(numberOfSlides)');

}

function goToSlide(slideToGo) {

$('.panel._active').removeClass('_active');

$slider.find('.panel').eq(slideToGo -1).addClass('_active');

$activeSlide = $slider.find('.panel').eq(slideToGo -1).addClass('_active');

$slider.trigger('slide.changed');

}

});