效果如下：
代碼如下：
<!doctype html><html><head><meta charset="utf-8"><title>flexslider.js移動(dòng)端輪播</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">圖片標(biāo)題</p> </a> </li> <li> <a href=""> <img src="http://ww4.sinaimg.cn/large/bea70753gw1f6fg9e38eyj21hc0m8tht.jpg" alt=""> <p class="ps1">圖片標(biāo)題</p> </a> </li> <li> <a href=""> <img src="http://ww4.sinaimg.cn/large/bea70753gw1f6fg9enyp1j21hc0m8465.jpg" alt=""> <p class="ps1">圖片標(biāo)題</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, //手動(dòng)切換后是否繼續(xù)自動(dòng)輪播,繼續(xù)(false),停止(true),默認(rèn)true animation: 'slide', //淡入淡出(fade)或滑動(dòng)(slide),默認(rèn)fade slideshowSpeed: 5000, //自動(dòng)輪播間隔時(shí)間(毫秒),默認(rèn)5000ms animationSpeed: 150, //輪播效果切換時(shí)間,默認(rèn)600ms direction: 'horizontal', //設(shè)置滑動(dòng)方向:左右horizontal或者上下vertical,需設(shè)置animation: "slide",默認(rèn)horizontal randomize: false, //是否隨機(jī)幻切換 animationLoop: true //是否循環(huán)滾動(dòng) }); setTimeout($('.flexslider img').fadeIn());});</script></body></html>以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持武林網(wǎng)！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
