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中style属性
Oct 11 Javascript
开发跨浏览器javascript常见注意事项
Jan 01 Javascript
JavaScript 闭包深入理解(closure)
May 27 Javascript
jquery插件validate验证的小例子
May 08 Javascript
js将json格式内容转换成对象的方法
Nov 01 Javascript
JavaScript实现自动消除按钮功能的方法
Aug 05 Javascript
Angularjs结合Bootstrap制作的一个TODO List
Aug 18 Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 Javascript
js禁止表单重复提交
Aug 29 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 Javascript
Vue3 Composition API的使用简介
Mar 29 Vue.js
简单实现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 变量的定义方法
2010/01/26 PHP
php去除字符串换行符示例分享
2014/02/13 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
php-redis中的sort排序函数总结
2015/07/08 PHP
PHP 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
javascript搜索框效果实现方法
2015/05/14 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
2017/06/13 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
2019/02/15 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
2019/04/26 Javascript
JS原生瀑布流效果实现
2019/04/26 Javascript
Vue混入mixins滚动触底的方法
2019/11/22 Javascript
python如何定义带参数的装饰器
2018/03/20 Python
django用户登录和注销的实现方法
2018/07/16 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
django利用request id便于定位及给日志加上request_id
2018/08/26 Python
详解Python3中ceil()函数用法
2019/02/19 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
python实现局域网内实时通信代码
2019/12/22 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
python爬虫利用代理池更换IP的方法步骤
2021/02/21 Python
CSS+jQuery+PHP+MySQL实现的在线答题功能
2015/04/25 HTML / CSS
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
《二泉映月》教学反思
2014/04/15 职场文书
服务承诺书范文
2014/05/19 职场文书
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS