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

PetitQ 幻灯片/轮播 2018-11-01 1.63K 0 1

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

HTML 结构:

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

也想出现在这里？联系我们吧

```
<div class="slider-container">
```

  <div class="slider-control left inactive"></div>

  <div class="slider-control right"></div>

```
  <ul class="slider-pagi"></ul>
```
```
  <div class="slider">
```
```
  <div class="slide slide-0 active">
```
```
    <div class="slide__bg"></div>
```
```
    <div class="slide__content">
```

      <svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">

        <path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />

```
      </svg>
```
```
      <div class="slide__text">
```

        <h2 class="slide__text-heading">Project name 1</h2>

        <p class="slide__text-desc">....</p>

        <a class="slide__text-link">Project link</a>

```
      </div>
```
```
    </div>
```
```
  </div>
```
```
  ......
```
```
  </div>
```
```
</div>
```

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

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

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

已有 407 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

幻灯片/轮播

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

HTML 结构:

JAVASCRIPT:

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

相关文章

基于json数据的动态jquery轮播图插件

基于Bootstrap支持移动端轮播图效果

简洁带缩略图的jquery焦点图特效

发表回复取消回复

热销模板

幻灯片/轮播

HTML 结构:

JAVASCRIPT:

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

相关文章

发表回复 取消回复

热销模板

发表回复取消回复