基于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 相关文章推荐
JQuery AJAX提交中文乱码的解决方案
Jul 02 Javascript
javascript学习(二)javascript常见问题总结
Jan 02 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 Javascript
JavaScript实现自动变换表格边框颜色
May 08 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
js父页面中使用子页面的方法
Jan 09 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
Vue中使用的EventBus有生命周期
Jul 12 Javascript
Vue实现移动端页面切换效果【推荐】
Nov 13 Javascript
微信小程序实现星级评价效果
Dec 28 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 Javascript
JS性能优化实现方法及优点进行
Aug 30 Javascript
举例说明如何为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
PHP strtok()函数的优点分析
2010/03/02 PHP
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
js中将多个语句写成一个语句的两种方法小结
2007/12/08 Javascript
JS对象转换为Jquery对象示例
2014/01/26 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
2019/10/26 Javascript
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
python基础教程之数字处理(math)模块详解
2014/03/25 Python
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
用Python程序抓取网页的HTML信息的一个小实例
2015/05/02 Python
Python中encode()方法的使用简介
2015/05/18 Python
Python使用turtule画五角星的方法
2015/07/09 Python
django 创建过滤器的实例详解
2017/08/14 Python
浅谈python 线程池threadpool之实现
2017/11/17 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
Europcar比利时:租车
2019/08/26 全球购物
食堂个人先进事迹
2014/01/22 职场文书
修理厂厂长岗位职责
2014/01/30 职场文书
技术负责人任命书
2014/06/05 职场文书
运动会标语
2014/06/21 职场文书
典型事迹材料范文
2014/12/29 职场文书
银行客户经理培训心得体会
2016/01/09 职场文书
Python打包为exe详细教程
2021/05/18 Python