flexslider.js实现移动端轮播


Posted in Javascript onFebruary 05, 2017

效果如下:

flexslider.js实现移动端轮播

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>flexslider.js移动端轮播</title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
<style>
/* reset wap */
body,p,a,div,ol,ul,li,dl,dd,h1,h2,h3,h4,h5,h6,input,iframe,nav,header,footer {
 margin: 0;
 padding: 0;
 list-style: none;
}
body {
 font: 16px Microsoft YaHei, sans-serif;
 -webkit-tap-highlight-color: transparent;
 color: #2a2b2c;
 background: #fff;
}
*, *::before, *::after {
 outline: none;
 box-sizing: border-box;
}
a,img {
 text-decoration: none;
 display: block;
 color: #2a2b2c;
 border: 0;
}
.wrapper {
 width: 360px;
 margin: 100px auto;
}
.h1s {
 margin: 40px 10px 10px 10px;
 font: 20px Microsoft YaHei;
}

/* flexslider */
.flexslider {
 height: 180px;
 position: relative;
 background: #f5f5f5;
 overflow: hidden;
}
.flex-viewport {
 height: 100%;
}
.slides {
 height: 100%;
 position: relative;
 z-index: 1;
}
.slides li {
 height: 100%;
}
.slides li a {
 display: block;
 height: 100%;
 position: relative;
}
.flexslider li img {
 display: block;
 width: 100%;
 height: 100%;
 display: none;
}
.flex-control-nav {
 text-align: center;
 padding: 0 5px;
 position: absolute;
 right: 0;
 bottom: 3px;
 z-index: 2;
}
.flex-control-nav li {
 display: inline-block;
 width: 8px;
 height: 8px;
 margin: 0 3px;
}
.flex-control-nav a {
 display: block;
 height: 100%;
 line-height: 40px;
 overflow: hidden;
 border: 1px solid #fff;
 border-radius: 55%;
}
.flex-control-nav .flex-active {
 background: #fff;
}
.flexslider .ps1 {
 width: 100%;
 height: 25px;
 color: #fff;
 background: rgba(0,0,0,.5);
 padding: 0 50px 0 10px;
 font: 14px/27px Microsoft YaHei;
 text-align: left;
 display: block;
 text-overflow: ellipsis;
 overflow: hidden;
 white-space: nowrap;
 position: absolute;
 bottom: 0;
 left: 0;
}
</style>
</head>
<body>
<div class="wrapper">
 <div class="flexslider">
  <ul class="slides">
   <li>
    <a href="">
     <img src="http://ww2.sinaimg.cn/large/bea70753gw1f6fg9db318j21hc0m8n61.jpg" alt="">
     <p class="ps1">图片标题</p>
    </a>
   </li>
   <li>
    <a href="">
     <img src="http://ww4.sinaimg.cn/large/bea70753gw1f6fg9e38eyj21hc0m8tht.jpg" alt="">
     <p class="ps1">图片标题</p>
    </a>
   </li>
   <li>
    <a href="">
     <img src="http://ww4.sinaimg.cn/large/bea70753gw1f6fg9enyp1j21hc0m8465.jpg" alt="">
     <p class="ps1">图片标题</p>
    </a>
   </li>
  </ul>
 </div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/flexslider/2.6.2/jquery.flexslider.min.js"></script>
<script>
$(function () {
 $('.flexslider').flexslider({
  directionNav: false,   //是否显示左右控制按钮
  controlNav: true,   //是否显示底部切换按钮
  pauseOnAction: false,  //手动切换后是否继续自动轮播,继续(false),停止(true),默认true
  animation: 'slide',   //淡入淡出(fade)或滑动(slide),默认fade
  slideshowSpeed: 5000,  //自动轮播间隔时间(毫秒),默认5000ms
  animationSpeed: 150,   //轮播效果切换时间,默认600ms
  direction: 'horizontal',  //设置滑动方向:左右horizontal或者上下vertical,需设置animation: "slide",默认horizontal
  randomize: false,   //是否随机幻切换
  animationLoop: true   //是否循环滚动
 });
 setTimeout($('.flexslider img').fadeIn());
});
</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
Jan 17 Javascript
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
为EasyUI的Tab标签添加右键菜单的方法
Jul 14 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 Javascript
Javascript核心读书有感之词法结构
Feb 01 Javascript
jQuery中 $ 符号的冲突问题及解决方案
Nov 04 Javascript
详解JavaScript常量定义
Jan 03 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
Vue制作Todo List网页
Apr 26 Javascript
原生JS实现小小的音乐播放器
Oct 16 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 Javascript
简单实现js悬浮导航效果
Feb 05 #Javascript
用js制作淘宝放大镜效果
Oct 28 #Javascript
js实现百度搜索提示框
Feb 05 #Javascript
jQuery.Form上传文件操作
Feb 05 #Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 #Javascript
用jquery的attr方法实现图片切换效果
Feb 05 #Javascript
JavaScript编写九九乘法表(两种任选)
Feb 04 #Javascript
You might like
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
要会喝咖啡也要会知道咖啡豆
2021/03/03 咖啡文化
一道关于php变量引用的面试题
2010/08/08 PHP
php自定义函数call_user_func和call_user_func_array详解
2011/07/14 PHP
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
表单JS弹出填写提示效果代码
2011/04/16 Javascript
JavaScript splice()方法详解
2020/09/22 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
js实现点击链接后窗口缩小并居中的方法
2015/03/02 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
Nodejs中crypto模块的安全知识讲解
2018/01/03 NodeJs
React 实现车牌键盘的示例代码
2019/12/20 Javascript
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
Python实现简单状态框架的方法
2015/03/19 Python
win与linux系统中python requests 安装
2016/12/04 Python
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
Python+pandas计算数据相关系数的实例
2018/07/03 Python
使用Python-OpenCV向图片添加噪声的实现(高斯噪声、椒盐噪声)
2019/05/28 Python
python 并发编程 非阻塞IO模型原理解析
2019/08/20 Python
Python os库常用操作代码汇总
2020/11/03 Python
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
Uber Eats台湾:寻找附近提供送餐服务的餐厅
2018/05/07 全球购物
女士时装鞋:Chinese Laundry
2018/08/29 全球购物
护士岗前培训自我评鉴
2014/02/28 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
物业公司管理制度
2015/08/05 职场文书
发言稿之优秀教师篇
2019/09/26 职场文书
Mysql文件存储图文详解
2021/06/01 MySQL
Pandas自定义选项option设置
2021/07/25 Python