基于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>
赞 (0)

相关推荐

  • 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幻灯片插件bxslider样式改进实例

    jquery幻灯片插件bxslider样式改进实例

    本文实例讲述了jquery幻灯片插件bxslider样式改进方法,分享给大家供大家参考.具体如下: 对比了很多jquery的幻灯片,都觉得不是很好,最后发现bxslider兼容性最好,移动设备支持手动翻动. 但是官方提供的显示效果真的很难看,让人难以接受.最后只能自己DIY了. bxslider官方样式如下: 改造后的样式如下: 第一步:引入bxslider 复制代码 代码如下: <!-- jQuery library (served from Google) -->  <script

  • jQuery插件Skippr实现焦点图幻灯片特效

    jQuery插件Skippr实现焦点图幻灯片特效

    史上效果最好的焦点图幻灯片jQuery插件Skippr,轻量级插件.响应式布局插件,强大的参数自定义 配置,可自定义切换速度.切换方式.是否显示左右箭头.是否自动播放.自动播放间隔时间等配置 参数,调用插件也非常简单易用,调用方式下面介绍下: 1.加载jQuery和插件 <link rel="stylesheet" href="css/jquery.skippr.css"> <script src="js/jquery.min.js&qu

  • jQuery插件slick实现响应式移动端幻灯片图片切换特效

    jQuery插件slick实现响应式移动端幻灯片图片切换特效

    jQuery响应式手机端移动端幻灯片图片切换特效插件slick,基于jQuery,功能非常强大,支持左右按钮切换.支持圆点切换.支持自定义切换数量,支持自定义切换速度.支持图片预加载.支持自动播放定义,效果非常的不错,众多的参数自定义支持,觉得可以的可以参考他们的参数配置,还是值得学习使用的. 使用方法: 1.加载插件和jQuery <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> &l

  • jQuery旋转木马式幻灯片轮播特效

    jQuery旋转木马式幻灯片轮播特效

    本文为大家分享anoSlide是一款超轻型响应式jQuery旋转木马幻灯片插件,它适合在PC端与移动端实现旋转木马幻灯片特效.具体内容如下 特点 响应式--适应任何视窗的宽度 混合内容 不需要CSS 轻量级(< 8 kb未压缩) 基于jQuery构建 集成图像预加载 回调函数--onConstruct onStart,onEnd 多个可配置选项 延迟加载图片 自动旋转 容易扩展 jquery实例:anoSlide使用方法 引入核心文件 <script src="js/jquery/1

  • jQuery插件animateSlide制作多点滑动幻灯片

    首页banner的酷炫效果多来自全屏大图的幻灯片动画,下面提供一种完美兼容的jquery动画特效:全新jquery多点滑动幻灯片--全屏动画animateSlide(代码完全原创). 直接上代码,把html.css和jquery代码copy到页面上即可呈现完美画面. html代码如下: <div class="animateSlide"> <div class="animateSlideImgWrap"> <div class=&quo

  • jQuery Tools tab(幻灯片)

    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特效 幻灯片效果示例代码

    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图片滚动与幻灯片的实例代码

    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模拟360浏览器切屏效果幻灯片(附demo源码下载)

    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

随机推荐