分享一款支持PC端手机端幻灯片代码是一款支持移

作者: 前端  发布:2019-08-28

基于Jquery代码实现支持PC端手机端幻灯片代码,jquery幻灯片

分享一款支持PC端手机端幻灯片代码是一款支持移动触摸,支持鼠标拖拽切换,支持带进度条的自动播放模式。交果图如下 :

9159.com 1

效果演示        源码下载

9159.com,html代码:

<div class="flex">
    <ul class="slides">
      <li data-title="Slide 1">
        <img alt="9159.com 2" src="img/beasts_feature.jpg">
      </li>
      <li data-title="Slide 2">
        <img alt="9159.com 3" src="img/element-taiwan-thmb.jpg">
      </li>
      <li data-title="Slide 3">
        <img alt="9159.com 4" src="img/streets-newyork.jpg">
      </li>
    </ul>
  </div>
  <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
  <script type="text/javascript" src="js/jflex.min.js"></script>
  <script type="text/javascript">
    $('.flex').jFlex({
      autoplay: true
    });
  </script>

分享一款支持PC端手机端幻灯片代码是一款支持移动触摸,支持鼠标拖拽切换,...

您可能感兴趣的文章:

  • jQuery旋转木马式幻灯片轮播特效
  • jquery简单实现幻灯片的方法
  • jQuery插件animateSlide制作多点滑动幻灯片
  • jQuery插件Skippr实现焦点图幻灯片特效
  • jQuery插件slick实现响应式移动端幻灯片图片切换特效
  • jquery幻灯片插件bxslider样式改进实例
  • jquery特效 幻灯片效果示例代码
  • Jquery图片滚动与幻灯片的实例代码
  • jQuery Tools tab(幻灯片)
  • jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
 初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该幻灯片插件。

1 $('.slider').jFlex();             

也可以在初始化的时候插入一些配置参数:

1 2 3 4 5 $('.flex').jFlex({     autoplay: true,     timing: 5000,     titles: 'bottom' });                 

您可能感兴趣的文章:

  • jQuery animate(滑块滑动效果代码)
  • 基于jquery的direction图片渐变动画效果
  • 40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
  • 40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
  • 最佳6款用于移动网站开发的jQuery 图片滑块插件小结
  • jQuery点击后一组图片左右滑动的实现代码
  • jQuery插件slicebox实现3D动画图片轮播切换特效
  • jQuery插件slider实现拖动滑块选取价格范围

在网站开发过程中,特别是前端开发这块,经常会使用到很多图片滑块动画,也就是...

分享一款支持PC端手机端幻灯片代码是一款支持移动触摸,支持鼠标拖拽切换,支持带进度条的自动播放模式。交果图如下 :

 浏览器兼容

  • Android 4.1
  • Chrome 31
  • Firefox 38
  • IE 9
  • Opera 30

via:

jflex是一款小巧的适合移动手机使用的jQuery幻灯片插件。该幻灯片插件支持移动触摸,支...

超赞的jQuery图片滑块动画特效代码汇总,jquery特效代码

在网站开发过程中,特别是前端开发这块,经常会使用到很多图片滑块动画,也就是一些基于jQuery和HTML5的焦点图插件。本文将为大家收集10个超赞的jQuery图片滑块动画,这些现成的jQuery插件将为你节省很多开发时间,而且效果都还不错,一起来欣赏一下吧。

1、jQuery HTML5实现的超炫全屏焦点图效果源码

这次我们要来分享一款非常绚丽的jQuery焦点图插件,同时这款焦点图也利用了HTML5和CSS3的相关特性,使图片切换效果更加丰富多彩。另外,这款jQuery焦点图插件的特点是全屏的效果,因此看上去也非常的大气和整体。

9159.com 5

在线演示

源码下载

2、jQuery基于SliderJS实现的左右滚动自动轮播焦点图插件源码

今天我们要继续来分享一款非常实用的jQuery焦点图插件,和其他的jQuery焦点图插件一样,它同样支持多张图片的任意跳转切换,同时,焦点图切换方式是水平的,而且相当流畅,因为这款jQuery焦点图实现很简单。

9159.com 6

在线演示

源码下载

3、jQuery实现的支持鼠标拖拽滑动的焦点图特效源码

今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即可切换图片。

9159.com 7

在线演示

源码下载

4、jQuery HTML5实现响应式焦点图动画应用特效源码

这是一款基于jQuery HTML5实现的响应式焦点图动画插件特效源码,它的响应式特性可以让焦点图在移动设备上也有不错的效果。为用户提供诸如进度条显示,动画过度效果显示,浮动层叠特效显示以及幻灯过度等多种特效,用户可根据自身网站应用进行相应的选择。是一款非常优秀的特效源码。该源码兼容目前最新的各类主流浏览器。

9159.com 8

在线演示

源码下载

5、基于jQuery实现的宽屏自动播放左右滑动切换焦点图插件源码

今天我们要再来分享一款宽屏且可以自动播放图片的jQuery焦点图插件,同样的,在图片切换的时候会出现上一张和下一张的部分图片,实现三张图片之间的左右滑动切换。

9159.com 9

在线演示

源码下载

6、宽屏可左右切换的jQuery焦点图插件

今天要继续为大家分享一款很不错的jQuery焦点图插件,它是宽屏展示的,而且有两个大气的按钮用来左右切换图片。

9159.com 10

在线演示

源码下载

7、HTML5实现的移动端图片左右切换动画效果源码 

今天要给大家分享一款很不错的图片左右切换焦点图动画,并且支持移动端触摸滑动。功能上,这款HTML5图片播放器支持鼠标滑动、手机端触摸滑动以及自动播放。外观上,这款HTML5图片切换动画的两侧有淡化处理,因此更显立体效果。

9159.com 11

在线演示

源码下载

8、jQuery实现的支持移动端触摸自适应焦点图插件源码

今天我们要来分享一款很灵活的jQuery焦点图插件,和以前介绍的jQuery焦点图动画类似,它也提供左右切换按钮,同时在图片上悬浮自定义图片切换按钮。切换动画包括上下左右切入动画以及淡入淡出动画。这款jQuery焦点图最大的特点是支持移动端触摸功能。

9159.com 12

在线演示

源码下载

9、jQuery实现可自动播放动画的焦点图插件源码

今天我们要分享一款可以自动播放动画的jQuery焦点图插件,它在切换图片的时候可以播放对应图片的各种动画效果。

9159.com 13

在线演示

源码下载

10、基于jQuery实现的带左右按钮切换的全屏广告图片焦点图特效源码

全屏的jQuery焦点图插件在之前我们已经介绍过很多了,比如这款jQuery全屏滑块焦点图 可自定义内容。今天我们要介绍的这款jQuery全屏广告图片焦点图插件也非常不错,图片切换时有淡出淡出的动画效果,并且也相当流畅。

9159.com 14

在线演示

源码下载

html代码:

 配置参数

  • autoplay:是否自动播放幻灯片。
  • fx:幻灯片的slide元素。
  • timing:幻灯片自动切换的时间。单位毫秒,默认值5000。
  • titles:幻灯片标签导航的位置。可选值:bottom, top。
<div class="flex">
    <ul class="slides">
      <li data-title="Slide 1">
        <img alt="9159.com 15" src="img/beasts_feature.jpg">
      </li>
      <li data-title="Slide 2">
        <img alt="9159.com 16" src="img/element-taiwan-thmb.jpg">
      </li>
      <li data-title="Slide 3">
        <img alt="9159.com 17" src="img/streets-newyork.jpg">
      </li>
    </ul>
  </div>
  <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
  <script type="text/javascript" src="js/jflex.min.js"></script>
  <script type="text/javascript">
    $('.flex').jFlex({
      autoplay: true
    });
  </script>
 HTML结构

该幻灯片使用无序列表的HTML结构,每一个<li>元素是幻灯片的一个slide。你可以通过设置<li>元素的data-title属性来设置幻灯片图片的标题。

1 2 3 4 5 6 7 8 9 10 11 12 13 <div class="slider">   <ul class="slides">     <li data-title="Slide 1">       <img alt="" src="1.jpg">     </li>     <li data-title="Slide 2">       <img alt="" src="2.jpg">     </li>     <li data-title="Slide 3">       <img alt="" src="3.jpg">     </li>   </ul> </div>            

效果演示        源码下载.rar)

适合移动手机使用的jQuery幻灯片插件,jquery幻灯片

jflex是一款小巧的适合移动手机使用的jQuery幻灯片插件。该幻灯片插件支持移动触摸,支持鼠标拖拽切换,还支持带进度条的自动播放模式。它是否的小球,使用非常简单。

9159.com 18

在线预览    源码下载

9159.com 19

 使用方法

使用该幻灯片插件需要引入jQuery,jflex.min.js和jflex.min.css文件。

1 2 3 <link rel="stylesheet" href="css/jflex.min.css" type="text/css"> <script type="text/javascript" src="js/jquery.min.js"></script <script type="text/javascript" src="js/jflex.min.js"></script>               

本文由9159.com发布于前端,转载请注明出处:分享一款支持PC端手机端幻灯片代码是一款支持移

关键词: 9159.com

上一篇:没有了
下一篇:没有了