flexslider.js实现移动端轮播

效果如下：

代码如下：

！doctype html html ownerta charset=' utf-8 ' title flex滑块。射流研究…移动端轮播/title meta content=' width=device-width，initial-scale=1.0，max-scale=1.0，user-scale=0 ' name=' viewport ' style/* reset WAP */body，p，a，div，ol，ul，li，dl，dd，h1，h2，h3，h4，h5，h6，input，iframe，nav，页眉，页脚{ margin 3360 0；padd : 0；列表样式：无；} body { font : 16px微软雅黑，无衬线；-网络套件-点击-高亮-颜色：透明；color: # 2a2b2c背景# fff}*，* :之前，* :之后{大纲：无盒子尺寸：边框盒子；}a、img { text-decoration : none显示器：块；color : # 2 a2b2cb order : 0；}.包装材料{ width : 360 pxmargin : 100 px自动；} . h1s { margin : 40px 10px 10pxfont : 20px微软雅黑；}/* flexslider */.flexslider { height: 180px相对位置：背景： # f5f5f5飞越：隐藏；}.flex-viewport {高度： 100%；}.幻灯片{身高： 100%；相对位置：z-index : 1；}.幻灯片李{身高： 100%；}.幻灯片阿利{显示：块；高度： 100%;相对位置：}.flexslider li img { display:块；宽度： 100%;高度： 100%;显示器：无；}.flex-control-nav { text-align : center；padding: 0 5px绝对位置：右： 0；底部： 3 pxz-指数： 2；}.flex-control-nav Li { display : inline-block；宽度： 8px高度： 8pxmargin: 0 3px}。flex-control-nav a { display : }块；高度： 100%;线高： 40px飞越：隐藏；border: 1px实心# fff边界半径： 55%;}.灵活控制导航flex-active {背景： # fff}.柔性滑块。PS1 {宽度： 100%；高度： 25pxcolor : # fffbackground : rgba(0，0，0，5);padd : 0 50px 0 10pxfont : 14px/27px微软雅黑；文本-左对齐：显示器：块；文本-飞越：省略号；飞越：隐藏；空白： nowrap绝对位置：底部： 0；左： 0；}/style/head dydiv class=' wrapper ' div class=' flex slider ' ul class=' slides '阿利href=' ' img src=' http :3358 ww 2。sinaimg。cn/large/bea 70753 gw1 f 6fg 9 db 318j 21 hc0m 8n 61。jpg ' alt=' p class=' PS1 '图片标题/p /a /li阿利图片标题/p /a /li阿利图片标题/p/a/Li/ul/div/div脚本src=' http :http://apps。bdimg。com/libs/jquery/2。1 .4/jquery。量滴js '/script script src=' http :http://cdn。布斯。com/flex滑块/2。6 .2/jquery。柔性滑块。量滴js '/script script $(function(){ $().伸缩滑块').flex滑块({ directionnav : false，//是否显示左右控制按钮controlNav: true，//是否显示底部切换按钮pauseOnAction: false，//手动切换后是否继续自动轮播，继续（假),停止（真实),默认真实动画： '幻灯片',//淡入淡出（褪色)或滑动（幻灯片),默认渐变色幻灯片显示速度： 5000,//自动轮播间隔时间（毫秒),默认5000毫秒动画速度： 150,//轮播效果切换时间，默认600毫秒方向： '水平'//设置滑动方向：左右水平的或者上下垂直的，需设置动画： '幻灯片，默认水平随机化：假，//是否随机幻切换animationLoop: true //是否循环滚动});setTimeout($(').伸缩滑块img’).fadeIn())；});/脚本/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！