基于Jquery代码实现支持PC端手机端幻灯片代码
作者:bea
分享一款支持PC端手机端幻灯片代码是一款支持移动触摸,支持鼠标拖拽切换,支持带进度条的自动播放模式。交果图如下 : 效果演示源码下载 html代码: <div class="flex"> <ul class="slides"> <li data-title="Slide 1"> <img alt="" src="img/beasts_feature.jpg"> </li>
分享一款支持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>
有用 | 无用
效果演示 源码下载
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如何动态创建table表格
- javascript中字体浮动效果的简单实例演示
- jQuery EasyUI 布局之动态添加tabs标签页
- 如何使用jquery easyui创建标签组件
- JavaScript严格模式详解
- 每天一篇javascript学习小结(String对象)
- 跟我学习javascript的执行上下文
- 跟我学习JScript的Bug与内存管理
- 跟我学习javascript的循环
- js操作table元素实现表格行列新增、删除技巧总结
- 跟我学习javascript的for循环和for...in循环
- js实现模拟银行卡账号输入显示效果
- 跟我学习javascript的prototype原型和原型链
- 超精准的javascript验证身份证号的具体实现方法
- javascript中checkbox使用方法简单实例演示
- javascript下拉列表中显示树形菜单的实现方法
- JS封装cookie操作函数实例(设置、读取、删除)
- jquery可定制的在线UEditor编辑器
- JS实现选项卡实例详解