幻灯片/轮播

支持触摸屏全屏幻灯片jQuery特效

创客主机


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

HTML结构:

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

  1. <div class="slider-container">
  2.   <div class="slider-control left inactive"></div>
  3.   <div class="slider-control right"></div>
  4.   <ul class="slider-pagi"></ul>
  5.   <div class="slider">
  6.   <div class="slide slide-0 active">
  7.     <div class="slide__bg"></div>
  8.     <div class="slide__content">
  9.       <svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
  10.         <path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
  11.       </svg>
  12.       <div class="slide__text">
  13.         <h2 class="slide__text-heading">Project name 1</h2>
  14.         <p class="slide__text-desc">....</p>
  15.         <a class="slide__text-link">Project link</a>
  16.       </div>
  17.     </div>
  18.   </div>
  19.   ......
  20.   </div>
  21. </div>

JAVASCRIPT:

用于驱动这个全屏响应式幻灯片特效的jQuery代码仅仅100多行,非常简单。其中autoSlide()方法用于幻灯片的自动播放。

  1. function autoSlide() {
  2.     autoSlideTimeout = setTimeout(function () {
  3.         curSlide++;
  4.         if (curSlide > numOfSlides)
  5.             curSlide = 0;
  6.         changeSlides();
  7.     }, autoSlideDelay);
  8. }

changeSlides()方法用于切换幻灯片。

  1. function changeSlides(instant) {
  2.     if (!instant) {
  3.         animating = true;
  4.         manageControls();
  5.         $slider.addClass('animating');
  6.         $slider.css('top');
  7.         $('.slide').removeClass('active');
  8.         $('.slide-' + curSlide).addClass('active');
  9.         setTimeout(function () {
  10.             $slider.removeClass('animating');
  11.             animating = false;
  12.         }, animTime);
  13.     }
  14.     window.clearTimeout(autoSlideTimeout);
  15.     $('.slider-pagi__elem').removeClass('active');
  16.     $('.slider-pagi__elem-' + curSlide).addClass('active');
  17.     $slider.css('transform', 'translate3d(' + -curSlide * 100 + '%,0,0)');
  18.     $slideBGs.css('transform', 'translate3d(' + curSlide * 50 + '%,0,0)');
  19.     diff = 0;
  20.     autoSlide();
  21. }

然后分别使用navigateLeft()和navigateRight()方法来控制向左或向右切换幻灯片。

  1. function navigateLeft() {
  2.     if (animating)
  3.         return;
  4.     if (curSlide > 0)
  5.         curSlide--;
  6.     changeSlides();
  7. }
  8. function navigateRight() {
  9.     if (animating)
  10.         return;
  11.     if (curSlide < numOfSlides)
  12.         curSlide++;
  13.     changeSlides();
  14. }

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

(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!