Swiper.js的腾讯新闻演示

演示效果地址：https://www.swiper.com.cn/demo/indexsample/；

代码：

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5     <title>Swiper</title>
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
  7     <link rel="stylesheet" href="../resource/swiper-4.4.1/dist/css/swiper.min.css">
  8     <script src="../resource/jquery-3.2.1/jquery-3.2.1.min.js"></script>
  9     <script src="../resource/swiper-4.4.1/dist/js/swiper.min.js"></script>
 10     <style>
 11         * {
 12             margin:0;
 13             padding:0;
 14         }
 15         #header {
 16             position:absolute;
 17             left:0;
 18             top:0;
 19             z-index:999;
 20             width:100%;
 21             height:43px;
 22             overflow:hidden;
 23             background:#fdfdfc;
 24             font:12px/40px hiragino sans gb,microsoft yahei,simsun;
 25             box-shadow:3px 3px 3px rgba(0,0,0,0.2);
 26         }
 27         /*页面顶部的渐变色线条*/
 28         #top-line {
 29             width:100%;
 30             height:3px;
 31             line-height:0;
 32             font-size:0;
 33             overflow:hidden;
 34             text-align:center;
 35             z-index:1;
 36             background-color:#0fa6ea;
 37             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%);
 38             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%);
 39             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%);
 40             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%);
 41         }
 42         #header .swiper-slide {
 43             padding:0 20px;
 44             width:auto;
 45         }
 46         #banner {
 47             width:100%;
 48             overflow:hidden;
 49             margin-top:43px;
 50             position:relative;
 51         }
 52         #banner .swiper-slide {
 53             position:relative;
 54             text-align:center;
 55         }
 56         #banner img {
 57             max-width:100%;
 58             display:block;
 59         }
 60         #banner h2 {
 61             text-align:center;
 62             font-size:1em;
 63             height:42px;
 64             line-height:42px;
 65             color:#fafafa;
 66             position:absolute;
 67             left:0;
 68             bottom:0;
 69             right:0;
 70             font-weight:normal;
 71             text-shadow:1px 1px 1px #000;
 72             background-color:rgba(0,0,0,0);
 73             background:-moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.7));
 74             background:-webkit-gradient(linear,top,from(rgba(0,0,0,0)),to(rgba(0,0,0,0.7)));
 75             background:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.7));
 76             background:-o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.7));
 77         }
 78         #banner .pagination {
 79             position:absolute;
 80             z-index:20;
 81             bottom:3px;
 82             text-align:center;
 83             right:0;
 84         }
 85         #banner .swiper-pagination-bullet {
 86             display:inline-block;
 87             width:5px;
 88             height:5px;
 89             border-radius:5px;
 90             background:#fff;
 91             margin:0 2px;
 92             opacity:0.8;
 93             cursor:pointer;
 94         }
 95         #banner .swiper-pagination-bullet-active {
 96             background:#ff6600;
 97         }
 98         #announcement {
 99             height:2em;
100             background:#f5f8fc;
101             border:1px solid #d2e1f1;
102             margin:0.5em;
103         }
104         #announcement a {
105             color:#294c7f;
106             text-decoration:none;
107             display:block;
108             line-height:2;
109             height:2em;
110             text-indent:0.5em;
111             overflow:hidden;
112         }
113         #tabs-container {
114             height:400px;
115         }
116         .tabs {
117             border-top:2px solid #9ac7ed;
118             background:url('../image/headbg (1).png') no-repeat left top #f9fafa;
119             background-size:auto 100%;
120             width:100%;
121             height:38px;
122             overflow:hidden;
123         }
124         .tabs a {
125             font-weight:normal;
126             text-align:center;
127             float:left;
128             width:64px;
129             height:38px;
130             line-height:38px;
131             color:#2a70be;
132             text-decoration:none;
133         }
134         .tabs a.active {
135             border-top:2px solid #2a70be;
136             margin-top:-2px;
137             background-image:url('../image/tab_ui.png');
138             background-repeat:no-repeat;
139             -webkit-background-size:64px 39px;
140             -moz-background-size:64px 39px;
141             -o-background-size:64px 39px;
142             background-size:64px 39px;
143             background-position:left top;
144             color:#c14545;
145         }
146         .news-list {
147             padding:0 10px;
148         }
149         .news-list li {
150             overflow:hidden;
151             border-bottom:1px solid #eceef0;
152             box-shadow:0 1px 1px #fff;
153             font-weight:normal;
154             height:35px;
155             line-height:35px;
156             font-size:80%;
157         }
158 
159     </style>
160 </head>
161 <body>
162 <div id="header">
163     <div id="top-line"></div>
164     <div class="swiper-wrapper">
165         <div class="swiper-slide">新闻</div>
166         <div class="swiper-slide">财经</div>
167         <div class="swiper-slide">娱乐</div>
168         <div class="swiper-slide">体育</div>
169         <div class="swiper-slide">订阅</div>
170         <div class="swiper-slide">微博</div>
171         <div class="swiper-slide">空间</div>
172         <div class="swiper-slide">书城</div>
173         <div class="swiper-slide">书城</div>
174         <div class="swiper-slide">书城</div>
175         <div class="swiper-slide">书城</div>
176         <div class="swiper-slide">书城</div>
177         <div class="swiper-slide">书城</div>
178         <div class="swiper-slide">书城</div>
179     </div>
180 </div>
181 
182 
183 
184 
185 
186 
187 
188 <div id="banner" class="swiper-container">
189     <div class="swiper-wrapper">
190         <div class="swiper-slide">
191             <img src="../image/three.jpg"/>
192             <h2>贾乃亮发长文默认李小璐出轨</h2></div>
193         <div class="swiper-slide">
194             <img src="../image/five.jpg" />
195             <h2>阿里程序员穿特步相亲被拒绝</h2></div>
196     </div>
197     <div class="pagination"></div>
198 </div>
199 <div id="announcement" class="swiper-container">
200     <div class="swiper-wrapper">
201         <div class="swiper-slide">
202             <a href="#">女博士相亲角被嘲？其实是有“预谋”的行为艺术</a></div>
203         <div class="swiper-slide">
204             <a href="#">你为什么还没过上你想要的生活</a></div>
205         <div class="swiper-slide">
206             <a href="#">莲花粉橙色也太美了！连直男都爱的仙女色！</a></div>
207     </div>
208 </div>
209 
210 
211 
212 
213 
214 
215 
216 
217 
218 
219 <!--原理：当点击tab上面的标题的时候，跳转到tabsSwiper.slideTo($(this).index())-->
220 
221 <div class="tabs">
222     <a href="#" class="active">新闻</a>
223     <a href="#">社会</a>
224     <a href="#">娱乐</a>
225 </div>
226 <div id="tabs-container" class="swiper-container">
227     <div class="swiper-wrapper">
228         <div class="swiper-slide">
229             <ul class="news-list">
230                 <li>女子强行阻拦高铁发车 称其丈夫没上车</li>
231                 <li>小马奔腾创始人妻子被判赔2亿债务</li>
232                 <li>杭州女子将200平荒地改造成“秘密花园”</li>
233                 <li>“紫光阁饭店”事件，乌龙背后是热搜的生意</li>
234                 <li>最美乘务员冒雪挨个扶旅客下火车</li>
235                 <li>五月天周杰伦再度合体</li>
236                 <li>张馨予被赞模特身材</li>
237                 <li>惊呆，杨紫的脸现在跟脖子一样宽了！</li>
238                 <li>睡姿暴露你偷情指数</li>
239                 <li>济南小伙儿自掏腰包，为陌生农民工加菜</li></ul>
240         </div>
241         <div class="swiper-slide">
242             <ul class="news-list">
243                 <li>女子街边卖早餐卖蓝色油条生意火爆</li>
244                 <li>保定励志哥！坐着轮椅唱歌成网红</li>
245                 <li>电影院保安恋上女研究生</li>
246                 <li>19岁女生保送北大直博</li>
247                 <li>男子越狱期间强奸女友12岁的女儿</li>
248                 <li>8旬爷爷因三个孩子都不赡养</li>
249                 <li>7座面包车塞进20名学生</li>
250                 <li>老人做家务时羽绒服突然“爆炸”</li>
251                 <li>直播间里，用歌舞抗癌的70岁“网红”</li>
252                 <li>PG_ONE粉丝买热搜"紫光阁地沟油"</li></ul>
253         </div>
254         <div class="swiper-slide">
255             <ul class="news-list">
256                 <li>“绿帽门”后贾乃亮深夜买醉</li>
257                 <li>姚笛大方挥手无名指戒指抢眼</li>
258                 <li>汪小菲被大S减肥成果吓到</li>
259                 <li>Baby和秀智同穿18万仙女裙</li>
260                 <li>易烊千玺得罪粉丝？接机时粉丝不想理他</li>
261                 <li>Tara成员：送了跑车还有90亿</li>
262                 <li>蒋欣在节目上的表情超有戏</li>
263                 <li>李小璐最新写真曝光，大走稳重的知性风</li>
264                 <li>马思纯和欧豪穿同款秀恩爱</li>
265                 <li>第90届奥斯卡颁奖礼发海报</li></ul>
266         </div>
267     </div>
268 </div>
269 <script type="text/javascript">
270     window.onload = function() {
271         var navSwiper = new Swiper('#header', {
272             // freeMode: true,//每次滑动时候只滑动一格，并自动和wrapper贴合；
273             slidesPerView: 'auto',//设置slider容器能够同时显示的slides数量
274             // freeModeSticky: true,//使得freeMode也能自动贴合。
275         });
276 
277 
278 
279         var bannerSwiper = new Swiper('#banner', {
280             autoplay: 5000,
281             visibilityFullFit: true,//开启虚拟的slide;
282             loop: true,
283             pagination: {
284                 el: '#banner .pagination',
285             }
286         });
287 
288 
289 
290         var announcementSwiper = new Swiper('#announcement', {
291             direction: 'vertical',
292             loop: true,
293             autoplay: {
294                 delay: 3000,
295                 disableOnInteraction: false,//用户操作之后禁止autoplay;
296             }
297         })
298 
299 
300 
301         var tabsSwiper = new Swiper('#tabs-container', {
302             speed: 500,
303             on: {
304                 slideChangeTransitionStart: function() {
305                     $(".tabs .active").removeClass('active');
306                     $(".tabs a").eq(this.activeIndex).addClass('active');
307                 }
308             }
309         })
310         $(".tabs a").on('click', function(e) {
311             e.preventDefault()
312             $(".tabs .active").removeClass('active')
313             $(this).addClass('active')
314             tabsSwiper.slideTo($(this).index())
315         })
316     }
317 </script>
318 </body>
319 </html>

 

posted @ 2018-10-30 22:02  前端极客  阅读(817)  评论(0)  编辑  收藏  举报