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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • 原生js实现移动开发轮播图、相册滑动特效

    使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" href="css/photoSlider.min.css" /> <script src="js/photoSlider.min.js" type="text/javascript" charset="utf-8"></script

  • 利用纯js + transition动画实现移动端web轮播图详解

    前言 在上一篇文章中,我们使用 tween算法实现了 ease-out移动效果, 其实更简洁的方法是使用 css3的 transition动画,下面话不多说了,来一起看看详细的介绍吧. 核心点: 在 我们通过代码来移动一段距离的时候, 使用 transion动画;在手指移动的时候,不使用transition动画. 使用 transition实现的动画效果的轮播图js代码不足100行 ~function () { var lastPX = 0; // 上一次触摸的位置x坐标, 需要计算出手指每次移

  • js实现移动端轮播图效果

    js实现移动端轮播图效果

    本文实例为大家分享了移动端轮播图效果展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max

  • 原生JS实现移动端web轮播图详解（结合Tween算法造轮子）

    原生JS实现移动端web轮播图详解（结合Tween算法造轮子）

    前言 相信大家应该都知道,移动端的轮播图是我们比较常见的需求, 我们最快的实现方式往往是 使用第三方的代码, 例如 swiper , 但当遇到一些比较复杂的轮播图需求时, 往往是束手无策,不知道怎么改. 所以我们要尝试去自己造一些轮子, 以适应各种复杂多变的需求;  另外一点, 自己写的代码如果有bug是很容易修复的, 对自身的提高也很大. 在没有阅读swiper源码的过程下,我尝试自己实现一个简易而不失实用的移动端轮播图, 经过几个小时的思考和实践终于还是实现了(如图): 实现移动端的轮播图要

  • 支持移动端原生js轮播图

    直接上代码,自行复制粘贴,本人是新手,欢迎指正. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>轮播图</title> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-sca

  • JavaScript实现移动端轮播效果

    这个轮播代码不是我自己所写,是偶然游览一个简友的主页看到的,今天刚看了事件,决定来逐行分析一下这个代码.首先,移动端与电脑端不同的是移动端只能通过触摸和手势来发生行为,所以我们要用到js中的与触摸操作有关的新事件.其实我们轮播的原理和以前相同,都是通过改变元素的位置来控制图片的出现,但让我们不是很上手的,是那些用于跟踪触摸的属性. 下面,我简单介绍一下与触摸相关的知识 触摸事件 touchstart:当手指触摸屏幕时触发,一只手指放在屏幕上也会触发 touchmove:当手指在屏幕上滑动时连续触

  • JS仿京东移动端手指拨动切换轮播图效果

    如今,移动端web页面在市场上也是占有相当大的比例,而移动端的轮播图效果也是很常见的,今天我就来记录下关于实现一组适用于移动端的可用手指进行拨动切换轮播图的效果. 这个效果的主要技术点依托于触屏设备特有的touch事件:好了,接下来就进入主题吧. 首先是html布局: 1. 这里强调的是记得给html加上viewport这个适口属性. 2. 由于在拨动第一张图片以及最后一张图片的时候需要切换到最后一张以及第一张,要想达到理想效果,需要给第一张图片前面加上最后一张图片,而在最后一张图片后加上第一张

  • Javascript实现视频轮播在pc端与移动端均可

    Javascript实现视频轮播在pc端与移动端均可

    最近客户要求用Javascript实现视频轮播: 有兴趣的同学可以参开一下 下面写了一个程序实现视频轮播,pc端与移动端均可以实现, 但移动端,存在有一点bug; 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <met

  • flexslider.js实现移动端轮播

    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="

  • js实现移动端轮播图

    本文实例为大家分享了js实现移动端轮播图的具体代码,供大家参考,具体内容如下 这是结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no initial-scale=1.0&

  • 原生JS实现pc端轮播图效果

    原生JS实现pc端轮播图效果

    本文实例为大家分享了JS实现pc端轮播图效果的具体代码,供大家参考,具体内容如下 案例:轮播图需求 布局:ul下有很多li标签:浮动在一行: 原理:切换图片的时候,把ul位置修改一下,给ul的父容器,设置一个 overflow:hidden: 功能需求: 序号轮播 左右按钮的轮播 自动轮播 鼠标在轮播图里面的时候,停止自动轮播,离开后继续自动轮播 实现效果: html部分 <div class="box" id="box"> <div class=

  • js实现移动端轮播图滑动切换

    本文实例为大家分享了js实现移动端轮播图滑动切换的具体代码,供大家参考,具体内容如下 移动端手势 轮播图分析 1.自动轮播且无缝 [定时器.过渡动画] 2.分页器要随着图片的轮播而改变 [根据索引切换] 3.滑动效果 [touch事件] 4.图片随着分页器变化 5.滑动结束的时候,如果滑动的距离不超过屏幕的1/3,就恢复回去 [过渡] 6.滑动结束的时候,如果滑动的距离超过屏幕的1/3,就切换 [滑动方向 + 过渡]] html页面结构 <!--轮播图--> <div class=&qu

  • javascript实现移动端轮播图

    javascript实现移动端轮播图

    本文实例为大家分享了js实现移动端轮播图的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>

  • 基于javascript实现移动端轮播图效果

    基于javascript实现移动端轮播图效果

    本文实例为大家分享了js实现移动端轮播图效果的具体代码,供大家参考,具体内容如下 插件使用: 1.zepto.js 2.touch.js 实现效果 html部分: <!-- 结构 --> <!-- li*6>a[href=#]>img[src=./images/$.jpg] --> <div class="box"> <ul> <!-- 为了无缝连接,我们在图片这里前后增加了2个图片 --> <li>

  • swiper移动端轮播插件（触碰图片之后停止轮播）

    本文实例为大家分享了swiper移动端轮播插件,供大家参考,具体内容如下 下面是我遇到的问题,也是用此插件常用的几个参数,如果你的轮播不需要很复杂,看本文就可以解决.假如你想多了解些, 看官们这里请 swiper 插件的官方地址. 第一步 引入 swiper.min.js <script src="../style/js/swiper.min.js"></script> 第二步 html <div class="swiper-container&

  • JavaScript+css+HTML实现移动端轮播图（含源码）

    JavaScript+css+HTML实现移动端轮播图（含源码）

    目录 1.移动轮播图 2.案例分析 3.关于anime.js 1.移动轮播图 移动端轮播图与PC段轮播图,在技术选择上是有区别的,因为移动端的浏览器版本非常好,对于H5和CSS3的支持非常完美,所以很多效果可以CSS3的方式实现,比如可以使用 Transorm 属性替代原来的动画函数 可以自动播放图片 手指可以拖动播放轮播图 添加指示器,但只起到指示作用,点击不能切换图片 不需要左右导航 因为移动端轮播图的宽度一般与屏幕一样宽,所以focus不设置宽度 移动端使用CSS3的方式进行图片切换,所以

随机推荐