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 相关文章推荐
修改jQuery Validation里默认的验证方法
Feb 14 Javascript
JQuery中SetTimeOut传参问题探讨
May 10 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
Mar 13 Javascript
jQuery实现首页顶部可伸缩广告特效代码
Apr 15 Javascript
Bootstrap前端开发案例一
Jun 17 Javascript
javascript中的try catch异常捕获机制用法分析
Dec 14 Javascript
javascript中神奇的 Date对象小结
Oct 12 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 Javascript
animate.css在vue项目中的使用教程
Aug 05 Javascript
微信小程序渲染性能调优小结
Jul 30 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
论建造顺序的重要性
2020/03/04 星际争霸
php下网站防IP攻击代码,超级实用
2010/10/24 PHP
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
基于jQuery的倒计时实现代码
2012/05/30 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
jQuery插件支持同一页面被多次调用
2016/02/14 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
ES6生成器用法实例分析
2017/04/10 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
Python中多线程的创建及基本调用方法
2016/07/08 Python
浅谈Python中range和xrange的区别
2017/12/20 Python
Python实现的当前时间多加一天、一小时、一分钟操作示例
2018/05/21 Python
Python3 jupyter notebook 服务器搭建过程
2018/11/30 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
Python基础之字典常见操作经典实例详解
2020/02/26 Python
Python greenlet和gevent使用代码示例解析
2020/04/01 Python
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
工商管理专业实习生自我鉴定
2013/09/29 职场文书
医药代表个人的求职信分享
2013/12/08 职场文书
运动会跳远广播稿
2014/02/04 职场文书
体育活动总结范文
2014/05/04 职场文书
企业人事任命书
2014/06/05 职场文书
现场活动策划方案
2014/08/22 职场文书
学校领导班子对照检查材料
2014/08/28 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
放牛班的春天观后感
2015/06/01 职场文书
孔子观后感
2015/06/08 职场文书
详细分析PHP7与PHP5区别
2021/06/26 PHP