当前位置：首页 > 网页特效 > 幻灯片和轮播图

jQuery 带弯曲背景的幻灯动画

分类：幻灯片和轮播图日期：2024-05-14 点击(4) 评论(0)

jQuery 带弯曲背景的幻灯动画

简介

js
```javascript
'use strict';

$(document).ready(function() {
    var $app = $('.app');
    var $img = $('.app__img');
    var $pageNav1 = $('.pages__item--1');
    var $pageNav2 = $('.pages__item--2');
    var animation = true;
    var curSlide = 1;
    var scrolledUp = undefined,
        nextSlide = undefined;

var pagination = function pagination(slide, target) {
        animation = true;
        if (target === undefined) {
            nextSlide = scrolledUp ? slide - 1 : slide + 1;
        } else {
            nextSlide = target;
        }

$('.pages__item--' + nextSlide).addClass('page__item-active');
        $('.pages__item--' + slide).removeClass('page__item-active');

$app.toggleClass('active');
        setTimeout(function() {
            animation = false;
        }, 3000);
    };

var navigateDown = function navigateDown() {
        if (curSlide > 1) return;
        scrolledUp = false;
        pagination(curSlide);
        curSlide++;
    };

var navigateUp = function navigateUp() {
        if (curSlide === 1) return;
        scrolledUp = true;
        pagination(curSlide);
        curSlide--;
    };

setTimeout(function() {
        $app.addClass('initial');
    }, 1500);

setTimeout(function() {
        animation = false;
    }, 4500);

$(document).on('mousewheel DOMMouseScroll', function(e) {
        var delta = e.originalEvent.wheelDelta;
        if (animation) return;
        if (delta > 0 || e.originalEvent.detail < 0) {
            navigateUp();
        } else {
            navigateDown();
        }
    });

$(document).on("click", ".pages__item:not(.page__item-active)", function() {
        if (animation) return;
        var target = +$(this).attr('data-target');
        pagination(curSlide, target);
        curSlide = target;
    });
});
```

web299.com

jQuery 带弯曲背景的幻灯动画

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果