浙江 杭州

jQuery支持触摸屏的全屏响应式幻灯片特效

系统分类: 网页特效 - jquery插件 - jQuery图片展示/幻灯片 2017-03-23

人气1336

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这是一款效果非常炫酷的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();
}                
              

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

查看演示
下载资源:1
下载资源
错误提交:

格式:zip 大小:33.37KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1879.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery支持触摸屏的全屏响应式幻灯片特效

我当前G币余额:0 已下载次数:1

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

说点什么...(已有0 评论)