flexslider.js实现移动端轮播的示例分析
短信预约 -IT技能 免费直播动态提醒
小编给大家分享一下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>
body,p,a,div,ol,ul,li,dl,dd,h2,h3,h4,h5,h6,h7,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;
}
.h2s {
margin: 40px 10px 10px 10px;
font: 20px Microsoft YaHei;
}
.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 class="lazy" data-src="http://ww2.sinaimg.cn/large/bea70753gw1f6fg9db318j21hc0m8n61.jpg" >
<p class="ps1">图片标题</p>
</a>
</li>
<li>
<a href="">
<img class="lazy" data-src="http://ww4.sinaimg.cn/large/bea70753gw1f6fg9e38eyj21hc0m8tht.jpg" >
<p class="ps1">图片标题</p>
</a>
</li>
<li>
<a href="">
<img class="lazy" data-src="http://ww4.sinaimg.cn/large/bea70753gw1f6fg9enyp1j21hc0m8465.jpg" >
<p class="ps1">图片标题</p>
</a>
</li>
</ul>
</div>
</div>
<script class="lazy" data-src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script class="lazy" data-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>以上是“flexslider.js实现移动端轮播的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
