基于Jquery代码实现支持PC端手机端幻灯片代码
分享一款支持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>
相关推荐
-
jQuery旋转木马式幻灯片轮播特效
本文为大家分享anoSlide是一款超轻型响应式jQuery旋转木马幻灯片插件,它适合在PC端与移动端实现旋转木马幻灯片特效.具体内容如下 特点 响应式--适应任何视窗的宽度 混合内容 不需要CSS 轻量级(< 8 kb未压缩) 基于jQuery构建 集成图像预加载 回调函数--onConstruct onStart,onEnd 多个可配置选项 延迟加载图片 自动旋转 容易扩展 jquery实例:anoSlide使用方法 引入核心文件 <script src="js/jquery/1
-
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
本文实例讲述了jQuery模拟360浏览器切屏效果幻灯片,分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w
-
jquery幻灯片插件bxslider样式改进实例
本文实例讲述了jquery幻灯片插件bxslider样式改进方法,分享给大家供大家参考.具体如下: 对比了很多jquery的幻灯片,都觉得不是很好,最后发现bxslider兼容性最好,移动设备支持手动翻动. 但是官方提供的显示效果真的很难看,让人难以接受.最后只能自己DIY了. bxslider官方样式如下: 改造后的样式如下: 第一步:引入bxslider 复制代码 代码如下: <!-- jQuery library (served from Google) --> <script
-
jQuery插件slick实现响应式移动端幻灯片图片切换特效
jQuery响应式手机端移动端幻灯片图片切换特效插件slick,基于jQuery,功能非常强大,支持左右按钮切换.支持圆点切换.支持自定义切换数量,支持自定义切换速度.支持图片预加载.支持自动播放定义,效果非常的不错,众多的参数自定义支持,觉得可以的可以参考他们的参数配置,还是值得学习使用的. 使用方法: 1.加载插件和jQuery <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> &l
-
Jquery图片滚动与幻灯片的实例代码
1.图片滚动 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>&l
-
jquery特效 幻灯片效果示例代码
jquery特效 幻灯片效果,效果图如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <title>jquery特效</title> <style> /* CSS Document */ body,h1,
-
jquery简单实现幻灯片的方法
本文实例讲述了jquery简单实现幻灯片的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m
-
jQuery插件Skippr实现焦点图幻灯片特效
史上效果最好的焦点图幻灯片jQuery插件Skippr,轻量级插件.响应式布局插件,强大的参数自定义 配置,可自定义切换速度.切换方式.是否显示左右箭头.是否自动播放.自动播放间隔时间等配置 参数,调用插件也非常简单易用,调用方式下面介绍下: 1.加载jQuery和插件 <link rel="stylesheet" href="css/jquery.skippr.css"> <script src="js/jquery.min.js&qu
-
jQuery Tools tab(幻灯片)
html 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>jQuery Tools standalone demo</title> <!-- include the Tools --> <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
-
jQuery插件animateSlide制作多点滑动幻灯片
首页banner的酷炫效果多来自全屏大图的幻灯片动画,下面提供一种完美兼容的jquery动画特效:全新jquery多点滑动幻灯片--全屏动画animateSlide(代码完全原创). 直接上代码,把html.css和jquery代码copy到页面上即可呈现完美画面. html代码如下: <div class="animateSlide"> <div class="animateSlideImgWrap"> <div class=&quo
随机推荐
- 深入探寻seajs的模块化与加载方式
- MSSQL内连接inner join查询方法
- VMware下CentOS 7 安装图文教程
- JavaScript无阻塞加载和defer、async详解
- Three.js的使用及绘制基础3D图形详解
- .net 弹出消息框后导致页面样式变乱解决方法
- PHP扩展Memcache分布式部署方案
- PHP进行批量任务处理不超时的解决方法
- AJAX中同时发送多个请求XMLHttpRequest对象处理方法
- python编程开发之textwrap文本样式处理技巧
- SpringMVC返回json数据的三种方式
- Android AsyncTack 异步任务实例详解
- 脚本 MsAgent组件 微软精灵 揪出系统自带的宠物
- javascript 实现划词标记划词搜索功能
- 简单介绍Python中的decode()方法的使用
- c# 正则指引--字符组
- Android使用自定义字体的方法
- swing分割窗口控件JSplitPane使用方法详解
- 解决Django layui {{}}冲突的问题
- C&C++设计风格选择 命名规范