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>

via:http://www.w2bc.com/article/2015-11-17-jquery-mobile-slide

时间: 2024-11-08 05:19:40

jquery支持PC端手机端幻灯片代码的相关文章

thinkphp 网站模板 电脑端手机端切换代码

ThinkPHP的模板主题机制,如果只是在PC,只要需修改 DEFAULT_THEME (新版模板主题默认是空,表示不启用模板主题功能)配置项就可以方便的实现多模板主题切换. 但对于移动端和PC端,也许你会设计完全不同的主题风格,且针对不同的来路提供不同的渲染方式,其中一种比较流行的方法是“响应式设计”,但就本人经历而言,要实现完全的“响应式设计”并不是那么容易,且解决兼容问题也是个难题,假设是大型站点,比如:淘宝.百度.拍拍这些,响应式设计肯定是满足不了需求的,而是需要针对手机访问用户提供单独

PC端/手机端 元素宽高问题

1.移动端开发元素及字体尺寸适配基础知识https://www.jianshu.com/p/dffa036d7595 2.谈css的伪元素::after和::beforehttps://www.cnblogs.com/laden666666/p/6089880.html 原文地址:http://blog.51cto.com/13968096/2349670

jquery简单的图片切换效果,支持pc端、移动端的banner图片切换开发

详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的banner图片切换效果. 写法很简单,网页初学者们或者wenbapp初学者们可以拿去学习学习,也可以在这基础上加上手机的图片滑动切换效果.废话不多说,下面说说这个简单的图片切换的效果吧! 首先以下是图片切换的效果图:   图片切换效果html内容: <div class="tyna2"&

用jQuery.touchSwipe插件实现手机端场景滑动切换效果

使用jQuery的touchSwipe插件监听触摸滑动事件,结合css3实现手机端场景滑动切换效果.最好在手机端测试代码,也可以在PC端用鼠标点击模拟滑动. 1.html代码: <div class="container"> <div class="page page0 page_current"> <h1>你好,我是0号屏幕,第一屏,鼠标单击向下/向上拖动</h1> </div> <div clas

即时通信系统中如何实现:支持PC端和移动端同时在线(即支持同帐号多设备同时登录)?

如果我们开发的即时通信系统(IM系统)要支持同帐号多设备同时登录的场景(或称"多地登录"),即需要像QQ一样,在PC端登录的同时,也可以使用同一个帐号登录移动端(iOS或Android),那么,如何才能做到了? 在ESFramework/ESPlatform体系中,是使用 UserID 作为唯一标志来标记每一个用户的,也就是说,对于一个指定的UserID,只能有一个客户端在线.所以,ESFramework 虽然支持多种类型的客户端设备,但是,ESFramework并不支持不同类型的客户

用phpcms切换中英文网页的方法(不用解析二级域名)、phpcms完成pc和手机端切换(同一域名)

AA.phpcms进行双语切换方法(不用解析二级域名) phpcms进行两种语言的切换,有一把部分的人都是进行的二级域名的解析,这样的话可能会有一部分的麻烦,我这里有一种方法可以不用解析二级域名就可以,不过因为是模板所以可能麻烦一点,不过真的是不接触不知道,接触到没有用到的东西就可以进行进一步的学习.作者:悦悦 博客地址:http://www.cnblogs.com/nuanai/ 这里我使用的方法是进行一级栏目的读取,通过不同的一级栏目进行不同的内容调取.只要修改一级栏目的id就可以了,这就需

js复制内容到剪切板,兼容pc和手机端,支持Safari浏览器

最近,一些项目中用到监听用户复制.剪切的操作. 案例1.在PC端,当用户获得一个京东卡的使用券,当用户使用ctrl + C复制得到的使用券时,将使用券的代号复制到粘贴板,以便于用户ctrl+v进行粘贴. 案例2:在移动端(android 和 iOS端),用户获得邀请码之后,可以使用一键复制的功能,将邀请码复制到剪切板,然后在app中进行兑换. 使用jQuery中的方法监听用户的剪切.复制.粘贴的行为 $("#cut").on("cut",function(){ al

通过F5根据User-Agent做PC和手机端的阻断

1,需求:公网时:移动端可以通过小程序访问,但是希望PC通过web方式不能访问.内网时:移动端和手机端均可以访问.因代码已经完成,再改后台代码周期太长,通过F5来实现, 2,关键点:通过抓包手机端 PC端: 简单来说:移动端的User-Agent 还有XXX字段.PC不含有 3,F5解决方案when HTTP_REQUEST { if { [IP::addr [IP::client_addr] equals 1.1.0.0/12] or [IP::addr [IP::client_addr] e

喜大普奔 | 微信小程序支持PC端打开了

微信小程序可以在PC端打开啦 微信PC版发布了v2.7.0测试版,其中一个重磅的功能就是:支持打开聊天中分享的小程序 咖啡君这么喜欢尝鲜的人自然是在第一时间下载进行了体验 安装成功,会有功能更新说明 上边赫然写着"可以打开聊天中的小程序消息",一阵兴奋 将小程序分享给好友后,可以在PC端微信聊天窗口中看到卡片式的小程序界面跟手机端看到的样式保持了一致 点击卡片可以打开小程序,小程序会以新窗口的形式呈现,且在任务栏有独立的图标 大部分的操作跟手机端保持了一致,同时需要微信登陆的地方也支持