首页>>Jquery图片>>响应式的视觉差图片轮播图(2020-05-24)

响应式的视觉差图片轮播图

响应式的视觉差图片轮播图
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="cont">  
  2.     <div class="slider"></div>  
  3.     <ul class="nav"></div>  
  4.     <div data-target='right' class="side-nav side-nav--right"></div>  
  5.     <div data-target='left' class="side-nav side-nav--left"></div>  
  6. </div>  
JavaScript Code
  1. 'use strict';  
  2.   
  3. $(document).ready(function () {  
  4.     var $cont = $('.cont');  
  5.     var $slider = $('.slider');  
  6.     var $nav = $('.nav');  
  7.     var winW = $(window).width();  
  8.     var animSpd = 750; // Change also in CSS  
  9.     var distOfLetGo = winW * 0.2;  
  10.     var curSlide = 1;  
  11.     var animation = false;  
  12.     var diff = 0;  
  13.   
  14.     // Generating slides  
  15.     var arrCities = ['Amsterdam', 'Rome', 'New—York', 'Singapore', 'Prague']; // Change number of slides in CSS also  
  16.     var numOfCities = arrCities.length;  
  17.     var arrCitiesDivided = [];  
  18.   
  19.     arrCities.map(function (city) {  
  20.         var length = city.length;  
  21.         var letters = Math.floor(length / 4);  
  22.         var exp = new RegExp(".{1," + letters + "}", "g");  
  23.   
  24.         arrCitiesDivided.push(city.match(exp));  
  25.     });  
  26.   
  27.     var generateSlide = function generateSlide(city) {  
  28.         var frag1 = $(document.createDocumentFragment());  
  29.         var frag2 = $(document.createDocumentFragment());  
  30.         var numSlide = arrCities.indexOf(arrCities[city]) + 1;  
  31.         var firstLetter = arrCitiesDivided[city][0].charAt(0);  
  32.   
  33.         var $slide = $('<div data-target="' + numSlide + '" class="slide slide--' + numSlide + '">nttttttt<div class="slide__darkbg slide--' + numSlide + '__darkbg"></div>nttttttt<div class="slide__text-wrapper slide--' + numSlide + '__text-wrapper"></div>ntttttt</div>');  
  34.   
  35.         var letter = $('<div class="slide__letter slide--' + numSlide + '__letter">nttttttt' + firstLetter + 'ntttttt</div>');  
  36.   
  37.         for (var i = 0, length = arrCitiesDivided[city].length; i < length; i++) {  
  38.             var text = $('<div class="slide__text slide__text--' + (i + 1) + '">ntttttttt' + arrCitiesDivided[city][i] + 'nttttttt</div>');  
  39.             frag1.append(text);  
  40.         }  
  41.   
  42.         var navSlide = $('<li data-target="' + numSlide + '" class="nav__slide nav__slide--' + numSlide + '"></li>');  
  43.         frag2.append(navSlide);  
  44.         $nav.append(frag2);  
  45.   
  46.         $slide.find('.slide--' + numSlide + '__text-wrapper').append(letter).append(frag1);  
  47.         $slider.append($slide);  
  48.   
  49.         if (arrCities[city].length <= 4) {  
  50.             $('.slide--' + numSlide).find('.slide__text').css("font-size", "12vw");  
  51.         }  
  52.     };  
  53.   
  54.     for (var i = 0, length = numOfCities; i < length; i++) {  
  55.         generateSlide(i);  
  56.     }  
  57.   
  58.     $('.nav__slide--1').addClass('nav-active');  
  59.   
  60.     // Navigation  
  61.     function bullets(dir) {  
  62.         $('.nav__slide--' + curSlide).removeClass('nav-active');  
  63.         $('.nav__slide--' + dir).addClass('nav-active');  
  64.     }  
  65.   
  66.     function timeout() {  
  67.         animation = false;  
  68.     }  
  69.   
  70.     function pagination(direction) {  
  71.         animation = true;  
  72.         diff = 0;  
  73.         $slider.addClass('animation');  
  74.         $slider.css({  
  75.             'transform': 'translate3d(-' + (curSlide - direction) * 100 + '%, 0, 0)'  
  76.         });  
  77.   
  78.         $slider.find('.slide__darkbg').css({  
  79.             'transform': 'translate3d(' + (curSlide - direction) * 50 + '%, 0, 0)'  
  80.         });  
  81.   
  82.         $slider.find('.slide__letter').css({  
  83.             'transform': 'translate3d(0, 0, 0)'  
  84.         });  
  85.   
  86.         $slider.find('.slide__text').css({  
  87.             'transform': 'translate3d(0, 0, 0)'  
  88.         });  
  89.     }  
  90.   
  91.     function navigateRight() {  
  92.         if (curSlide >= numOfCities) return;  
  93.         pagination(0);  
  94.         setTimeout(timeout, animSpd);  
  95.         bullets(curSlide + 1);  
  96.         curSlide++;  
  97.     }  
  98.   
  99.     function navigateLeft() {  
  100.         if (curSlide <= 1) return;  
  101.         pagination(2);  
  102.         setTimeout(timeout, animSpd);  
  103.         bullets(curSlide - 1);  
  104.         curSlide--;  
  105.     }  
  106.   
  107.     function toDefault() {  
  108.         pagination(1);  
  109.         setTimeout(timeout, animSpd);  
  110.     }  
  111.   
  112.     // Events  
  113.     $(document).on('mousedown touchstart', '.slide', function (e) {  
  114.         if (animation) return;  
  115.         var target = +$(this).attr('data-target');  
  116.         var startX = e.pageX || e.originalEvent.touches[0].pageX;  
  117.         $slider.removeClass('animation');  
  118.   
  119.         $(document).on('mousemove touchmove', function (e) {  
  120.             var x = e.pageX || e.originalEvent.touches[0].pageX;  
  121.             diff = startX - x;  
  122.             if (target === 1 && diff < 0 || target === numOfCities && diff > 0) return;  
  123.   
  124.             $slider.css({  
  125.                 'transform': 'translate3d(-' + ((curSlide - 1) * 100 + diff / 30) + '%, 0, 0)'  
  126.             });  
  127.   
  128.             $slider.find('.slide__darkbg').css({  
  129.                 'transform': 'translate3d(' + ((curSlide - 1) * 50 + diff / 60) + '%, 0, 0)'  
  130.             });  
  131.   
  132.             $slider.find('.slide__letter').css({  
  133.                 'transform': 'translate3d(' + diff / 60 + 'vw, 0, 0)'  
  134.             });  
  135.   
  136.             $slider.find('.slide__text').css({  
  137.                 'transform': 'translate3d(' + diff / 15 + 'px, 0, 0)'  
  138.             });  
  139.         });  
  140.     });  
  141.   
  142.     $(document).on('mouseup touchend', function (e) {  
  143.         $(document).off('mousemove touchmove');  
  144.   
  145.         if (animation) return;  
  146.   
  147.         if (diff >= distOfLetGo) {  
  148.             navigateRight();  
  149.         } else if (diff <= -distOfLetGo) {  
  150.             navigateLeft();  
  151.         } else {  
  152.             toDefault();  
  153.         }  
  154.     });  
  155.   
  156.     $(document).on('click', '.nav__slide:not(.nav-active)', function () {  
  157.         var target = +$(this).attr('data-target');  
  158.         bullets(target);  
  159.         curSlide = target;  
  160.         pagination(1);  
  161.     });  
  162.   
  163.     $(document).on('click', '.side-nav', function () {  
  164.         var target = $(this).attr('data-target');  
  165.   
  166.         if (target === 'right') navigateRight();  
  167.         if (target === 'left') navigateLeft();  
  168.     });  
  169.   
  170.     $(document).on('keydown', function (e) {  
  171.         if (e.which === 39) navigateRight();  
  172.         if (e.which === 37) navigateLeft();  
  173.     });  
  174.   
  175.     $(document).on('mousewheel DOMMouseScroll', function (e) {  
  176.         if (animation) return;  
  177.         var delta = e.originalEvent.wheelDelta;  
  178.   
  179.         if (delta > 0 || e.originalEvent.detail < 0) navigateLeft();  
  180.         if (delta < 0 || e.originalEvent.detail > 0) navigateRight();  
  181.     });  
  182. });  

原文地址:http://www.freejs.net/article_jquerytupiantexiao_864.html