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


Posted in Javascript onNovember 17, 2015

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

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

效果演示        源码下载

html代码:

<div class="flex">
    <ul class="slides">
      <li data-title="Slide 1">
        <img alt="" src="img/beasts_feature.jpg">
      </li>
      <li data-title="Slide 2">
        <img alt="" src="img/element-taiwan-thmb.jpg">
      </li>
      <li data-title="Slide 3">
        <img alt="" 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>
Javascript 相关文章推荐
JS 类型转换常见方法小结
May 31 Javascript
js获取input标签的输入值实现代码
Aug 05 Javascript
js获取url中&quot;?&quot;后面的字串方法
May 15 Javascript
javascript操作ul中li的方法
May 14 Javascript
jquery 判断selection range 是否在容器中的简单实例
Aug 02 Javascript
Vue.js搭建移动端购物车界面
Jun 28 Javascript
JavaScript 下载svg图片为png格式
Jun 21 Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
May 23 Javascript
js实现html滑动图片拼图验证
Jun 24 Javascript
Threejs实现滴滴官网首页地球动画功能
Jul 13 Javascript
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
举例说明如何为JavaScript的方法参数设置默认值
Nov 17 #Javascript
Jquery easyui 实现动态树
Nov 17 #Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
Nov 17 #Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 #Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 #Javascript
基于Jquery easyui 选中特定的tab
Nov 17 #Javascript
jquery实现简单的表单验证
Nov 17 #Javascript
You might like
星际RPG字典
2020/03/04 星际争霸
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
浅谈php serialize()与unserialize()的用法
2013/06/05 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
php foreach如何跳出两层循环(详解)
2016/11/05 PHP
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
PHP各种常见经典算法总结【排序、查找、翻转等】
2019/08/05 PHP
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
JavaScript中捕获与冒泡详解及实例
2017/02/03 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
微信小程序 蓝牙的实现实例代码
2017/06/27 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
微信小程序如何加载数据库真实数据的实现
2020/03/04 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
什么是python的列表推导式
2020/05/26 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
什么是java序列化,如何实现java序列化
2012/11/14 面试题
应届生污水处理求职信
2013/11/06 职场文书
《美丽的公鸡》教学反思
2014/02/25 职场文书
电视购物广告词
2014/03/19 职场文书
2014年统战工作总结
2014/12/09 职场文书
建党伟业观后感
2015/06/01 职场文书
远程教育学习心得体会
2016/01/23 职场文书