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 相关文章推荐
input 高级限制级用法
Mar 26 Javascript
URL地址中的#符号使用说明
Feb 12 Javascript
JavaScript实现在标题栏上显示当前日期的方法
Mar 19 Javascript
JavaScript中Function()函数的使用教程
Jun 04 Javascript
jQuery无刷新上传之uploadify简单代码
Jan 17 Javascript
jQuery DateTimePicker 日期和时间插件示例
Jan 22 Javascript
深入理解移动前端开发之viewport
Oct 19 Javascript
vue使用Proxy实现双向绑定的方法示例
Mar 20 Javascript
Vue自定义全局Toast和Loading的实例详解
Apr 18 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
Apr 28 Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 04 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 19 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
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
PHP把MSSQL数据导入到MYSQL的方法
2014/12/27 PHP
PHP处理postfix邮件内容的方法
2015/06/16 PHP
PHP在线书签系统分享
2016/01/04 PHP
微信支付扫码支付php版
2016/07/22 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
JS trim去空格的最佳实践
2011/10/30 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
2015/03/26 Javascript
jquery背景跟随鼠标滑动导航
2015/11/20 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
javascript+css3开发打气球小游戏完整代码
2017/11/28 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
Python的Flask开发框架简单上手笔记
2015/11/16 Python
详解Python命令行解析工具Argparse
2016/04/20 Python
详解Python import方法引入模块的实例
2017/08/02 Python
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
浅谈django orm 优化
2018/08/18 Python
Python 使用 prettytable 库打印表格美化输出功能
2019/12/26 Python
Python字典实现伪切片功能
2020/10/28 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
建材业务员岗位职责
2013/12/08 职场文书
财经学院自荐信范文
2014/02/02 职场文书
大跃进口号
2014/06/16 职场文书
成绩报告单家长评语
2014/12/30 职场文书
幼儿园庆六一主持词
2015/06/30 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
单位车辆管理制度
2015/08/05 职场文书
小学数学国培研修日志
2015/11/13 职场文书
为什么你写的height:100%不起作用
2021/05/10 HTML / CSS