移动端轮播
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Swiper中文網基礎演示(www.swiper.com.cn)</title><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /><link rel="stylesheet" href="css/swiper.min.css"><script src="js/jquery-1.10.1.min.js"></script><script src="js/swiper.min.js"></script><style>* {margin: 0;padding: 0;}#header {position: absolute;left: 0;top: 0;z-index: 999;width: 100%;height: 43px;overflow: hidden;background: #fdfdfc;font: 12px/40px hiragino sans gb, microsoft yahei, simsun;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);}#top-line {width: 100%;height: 3px;line-height: 0;font-size: 0;overflow: hidden;text-align: center;z-index: 1;background-color: #0fa6ea;background: -webkit-linear-gradient(left, rgba(15, 166, 234, 1) 0, rgba(89, 204, 24, 1) 10%, rgba(15, 166, 234, 1) 60%, rgba(15, 166, 234, 1) 100%);background: -moz-linear-gradient(left, rgba(15, 166, 234, 1) 0, rgba(89, 204, 24, 1) 10%, rgba(15, 166, 234, 1) 60%, rgba(15, 166, 234, 1) 100%);background: -ms-linear-gradient(left, rgba(15, 166, 234, 1) 0, rgba(89, 204, 24, 1) 10%, rgba(15, 166, 234, 1) 60%, rgba(15, 166, 234, 1) 100%);background: linear-gradient(left, rgba(15, 166, 234, 1) 0, rgba(89, 204, 24, 1) 10%, rgba(15, 166, 234, 1) 60%, rgba(15, 166, 234, 1) 100%);}#header .swiper-slide {padding: 0 20px;width: auto;}#banner {width: 100%;overflow: hidden;margin-top: 43px;position: relative;}#banner .swiper-slide {position: relative;text-align: center;}#banner img {max-width: 100%;display: block;}#banner h2 {text-align: center;font-size: 1em;height: 42px;line-height: 42px;color: #fafafa;position: absolute;left: 0;bottom: 0;right: 0;font-weight: normal;text-shadow: 1px 1px 1px #000;/* background-color:rgba(21,20,20,0.5);*/background-color: rgba(0, 0, 0, 0);background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));background: -webkit-gradient(linear, top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.7)));background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));background: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));}#banner .pagination {position: absolute;z-index: 20;bottom: 3px;text-align: center;right: 0;}#banner .swiper-pagination-bullet {display: inline-block;width: 5px;height: 5px;border-radius: 5px;background: #fff;margin: 0 2px;opacity: 0.8;cursor: pointer;}#banner .swiper-pagination-bullet-active {background: #ff6600;}#announcement {height: 2em;background: #f5f8fc;border: 1px solid #d2e1f1;margin: 0.5em;}#announcement a {color: #294c7f;text-decoration: none;display: block;line-height: 2;height: 2em;text-indent: 0.5em;overflow: hidden;}#tabs-container {height: 400px;}.tabs {border-top: 2px solid #9ac7ed;background: url(images/headbg.png) no-repeat left top #f9fafa;background-size: auto 100%;width: 100%;height: 38px;overflow: hidden;}.tabs a {font-weight: normal;text-align: center;float: left;width: 64px;height: 38px;line-height: 38px;color: #2a70be;text-decoration: none;}.tabs a.active {border-top: 2px solid #2a70be;margin-top: -2px;background-image: url(images/tab_ui.png);background-repeat: no-repeat;-webkit-background-size: 64px 39px;-moz-background-size: 64px 39px;-o-background-size: 64px 39px;background-size: 64px 39px;background-position: left top;color: #c14545;}.news-list {padding: 0 10px;}.news-list li {overflow: hidden;border-bottom: 1px solid #eceef0;box-shadow: 0 1px 1px #fff;font-weight: normal;height: 35px;line-height: 35px;font-size: 80%;}</style>
</head><body><div id="header"><div id="top-line"></div><div class="swiper-wrapper"><div class="swiper-slide">新聞</div><div class="swiper-slide">財經</div><div class="swiper-slide">娛樂</div><div class="swiper-slide">體育</div><div class="swiper-slide">訂閱</div><div class="swiper-slide">微博</div><div class="swiper-slide">空間</div><div class="swiper-slide">書城</div></div>
</div><div id="banner" class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><img src="images/0.jpg?v=sf" /><h2>賈乃亮發長文默認李小璐出軌</h2></div><div class="swiper-slide"><img src="images/1.jpg?v=wf" /><h2>阿里程序員穿特步相親被拒絕</h2></div></div><div class="pagination"></div>
</div>
<div id="announcement" class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><a href="#">女博士相親角被嘲？其實是有“預謀”的行為藝術</a></div><div class="swiper-slide"><a href="#">你為什么還沒過上你想要的生活</a></div><div class="swiper-slide"><a href="#">蓮花粉橙色也太美了！連直男都愛的仙女色！</a></div></div>
</div><div class="tabs"><a href="#" class="active">新聞</a><a href="#">社會</a><a href="#">娛樂</a></div><div id="tabs-container" class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><ul class="news-list"><li>女子強行阻攔高鐵發車 稱其丈夫沒上車</li><li>小馬奔騰創始人妻子被判賠2億債務</li><li>杭州女子將200平荒地改造成“秘密花園”</li><li>“紫光閣飯店”事件，烏龍背后是熱搜的生意</li><li>最美乘務員冒雪挨個扶旅客下火車</li><li>五月天周杰倫再度合體</li><li>張馨予被贊模特身材</li><li>驚呆，楊紫的臉現在跟脖子一樣寬了！</li><li>睡姿暴露你偷情指數</li><li>濟南小伙兒自掏腰包，為陌生農民工加菜</li></ul></div><div class="swiper-slide"><ul class="news-list"><li>女子街邊賣早餐賣藍色油條生意火爆</li><li>保定勵志哥！坐著輪椅唱歌成網紅</li><li>電影院保安戀上女研究生</li><li>19歲女生保送北大直博</li><li>男子越獄期間強奸女友12歲的女兒</li><li>8旬爺爺因三個孩子都不贍養</li><li>7座面包車塞進20名學生</li><li>老人做家務時羽絨服突然“爆炸”</li><li>直播間里，用歌舞抗癌的70歲“網紅”</li><li>PG_ONE粉絲買熱搜"紫光閣地溝油"</li></ul></div><div class="swiper-slide"><ul class="news-list"><li>“綠帽門”后賈乃亮深夜買醉</li><li>姚笛大方揮手無名指戒指搶眼</li><li>汪小菲被大S減肥成果嚇到</li><li>Baby和秀智同穿18萬仙女裙</li><li>易烊千璽得罪粉絲？接機時粉絲不想理他</li><li>Tara成員：送了跑車還有90億</li><li>蔣欣在節目上的表情超有戲</li><li>李小璐最新寫真曝光，大走穩重的知性風</li><li>馬思純和歐豪穿同款秀恩愛</li><li>第90屆奧斯卡頒獎禮發海報</li></ul></div></div></div><script type="text/javascript">window.onload = function () {var navSwiper = new Swiper('#header', {freeMode: true,slidesPerView: 'auto',freeModeSticky: true,});var bannerSwiper = new Swiper('#banner', {autoplay: 5000,visibilityFullFit: true,loop: true,pagination: {el: '#banner .pagination',}});var announcementSwiper = new Swiper('#announcement', {direction: 'vertical',loop: true,autoplay: {delay: 3000,disableOnInteraction: false,}})var tabsSwiper = new Swiper('#tabs-container', {speed: 500,on: {slideChangeTransitionStart: function () {$(".tabs .active").removeClass('active');$(".tabs a").eq(this.activeIndex).addClass('active');}}})$(".tabs a").on('click', function (e) {e.preventDefault()$(".tabs .active").removeClass('active')$(this).addClass('active')tabsSwiper.slideTo($(this).index())})}</script>
</body></html>
總結
- 上一篇： 点击显示和隐藏
- 下一篇： CSS3 Flexbox 弹性盒与 cs