Swiper结合jQuery实现腾讯新闻首页

今天我们来说一下,Swiper结合jQuery实现的腾讯新闻首页,

咱们先来看一下效果图:

这也是我把PC端缩成移动端来截的图,毕竟是PC端,要是不好看的话请见谅,,,,,,,,,,,,,

然后请允许我墨迹几句话,说一下我的小思路,

我的这个页面上,所有的东西都是可以滑动的,包括上面的小导航....也就是说可移动的滑块有三个;

1,导航条

2.轮播图,

3选项卡

在这方面我用了3个Swiper滑块,分别设置不同的属性,然后在选项卡里我用了onSlideChangeStart这个方法,回调函数，swiper从当前slide开始过渡到另一个slide时执行。触摸情况下，如果释放slide时没有达到过渡条件而回弹时不会触发这个函数.然后通过jQuery来操作CSS样式,完成选项卡的效果:

翠花:"代码来了"!

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>腾讯</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;

	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;

}

#header .swiper-slide {

	padding: 0 20px;

	width:auto;

}

#banner {

	width: 100%;

	height:170px;

	overflow: hidden;

	margin-top:43px;

	position:relative;

}

#banner .swiper-slide {

	position:relative;

	text-align:center;

}

#banner img {

	max-width: 100%;

}

.gallerytitle {

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);

}

.pagination {

  position: absolute;

  z-index: 20;

  bottom: 10px;

  width: 66px;

  text-align: center;

  right:0;

}

.swiper-pagination-bullet {

  display: inline-block;

  width: 5px;

  height: 5px;

  border-radius:5px;

  background: #fff;

  margin: 0 2px;

  opacity: 0.8;

  cursor: pointer;

}

.swiper-pagination-bullet-active {

  background: #ff6600;

}

#tabs-container{

	height:400px;

}

.tabs{

	margin-top:20px;

	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-size: 1.125em;

font-weight: normal;

text-align: center;

float: left;

width: 64px;

height: 38px;

line-height: 38px;

color: #2a70be;

}

.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: 1.125em;

}

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

  <div class="swiper-wrapper">

    <div class="swiper-slide"><img src="data:images/0.jpg" /><h2 class="gallerytitle">孙俪芈月造型亮相 清纯似少女</h2></div>

    <div class="swiper-slide"><img src="data:images/1.jpg" /><h2 class="gallerytitle">Angelababy弟弟曝光 五官精致颜值爆表</h2></div>

  </div>

<div class="pagination"></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">

        <div class="content-slide">

        <ul class="news-list">

       <li>朝鲜逃兵越境杀4名中国人被捕</li>

<li>温州立人集团非法吸存案宣判</li>

<li>陈水扁坐狱6年后获准保外就医</li>

<li>她们的家长不觉得丢人吗？</li>

<li>1名韩国毒贩在华被执行死刑</li>

<li>呼格案疑似真凶赵志红受审</li>

<li>媒体披露杨卫泽被带走细节</li>

<li>改样板戏，你能比徐克牛吗?</li>

<li>社保缴费狂涨：穷人不堪重负</li>

<li>A股美元：当负相关已成往事</li>

        </ul>

        </div>

      </div>

      <div class="swiper-slide">

        <div class="content-slide">

         <ul class="news-list">

       <li>

        巨型野生灵芝直径1米多</li>

<li>那些年 被毁过的童年照</li>

<li>男子为侄儿设计“大白鲨”床</li>

<li>女子婚后发现车房全是借来的</li>

<li>女子钓到800斤金枪鱼</li>

<li>濒危动物并非全都可爱</li>

<li>贫困大学生捡万元现金交警察</li>

<li>女子裸体钻烟囱欲见前男友</li>

<li>父亲将女儿房子赠给自己被告</li>

<li>少女开颅手术中醒来询问进程</li>

</ul>

        </div>

      </div>

      <div class="swiper-slide">

        <div class="content-slide"> <ul class="news-list">

       <li>

        韩国也山寨"机器大狗":能跑能跳</li>

   <li>杨子荣智取威虎山的前前后后</li>

   <li>中国近2年已猛造100艘舰艇</li>

   <li>兵王练瞄准用眼过度 险些失明</li>

   <li>美媒称中日开战美国有2种结局</li>

   <li>俄神秘电台连续40年发送信号</li>

   <li>专家:翼龙战机可部署中越边境</li>

   <li>驻藏战士前行500米用1小时</li>

   <li>"太行"行了:歼11B重歼大批下线</li>

   <li>中国水下机器人可攻击敌蛙人

</li></ul>

        </div>

      </div>

    </div>

  </div>

<script type="text/javascript">

window.onload = function() {

  var mySwiper1 = new Swiper('#header',{

	  freeMode : true,

	  slidesPerView : 'auto',

  });

  var mySwiper2 = new Swiper('#banner',{

	  autoplay:5000,

	  visibilityFullFit : true,

	  loop:true,

	  pagination : '.pagination',

  });

  var tabsSwiper = new Swiper('#tabs-container',{

    speed:500,

    onSlideChangeStart: function(){

      $(".tabs .active").removeClass('active')

      $(".tabs a").eq(tabsSwiper.activeIndex).addClass('active')

    }

  })

  $(".tabs a").on('touchstart mousedown',function(e){

    e.preventDefault()

    $(".tabs .active").removeClass('active')

    $(this).addClass('active')

    tabsSwiper.slideTo( $(this).index() )

  })

  $(".tabs a").click(function(e){

    e.preventDefault()

  })

}

</script>

</body>

</html>

　　今天的知识就是这样!你们学会了吗????

Swiper结合jQuery实现腾讯新闻首页的更多相关文章

Python爬取腾讯新闻首页所有新闻及评论
前言这篇博客写的是实现的一个爬取腾讯新闻首页所有的新闻及其所有评论的爬虫.选用Python的Scrapy框架.这篇文章主要讨论使用Chrome浏览器的开发者工具获取新闻及评论的来源地址. Chrom ...
腾讯新闻多图jQuery相册展示效果代码
腾讯新闻多图jQuery相册代码,带左右切换箭头,带缩略图,可左右切换,点击缩略图展示原图. 在线演示本地下载
【Android UI设计与开发】7.底部菜单栏（四）PopupWindow 实现显示仿腾讯新闻底部弹出菜单
前一篇文章中有用到 PopupWindow 来实现弹窗的功能.简单介绍以下吧. 官方文档是这样解释的:这就是一个弹出窗口,可以用来显示一个任意视图.出现的弹出窗口是一个浮动容器的当前活动. 1.首先来 ...
基于jQuery的新浪游戏首页幻灯片
分享一款基于jQuery的新浪游戏首页幻灯片,带左右箭头,选项卡缩略图,自动轮播切换的jQuery幻灯片代码.效果图如下: 在线预览源码下载实现的代码. html代码: <br>& ...
Android------视频播放器（包含全屏播放，快退，快进，腾讯新闻的列表播放等）
前段时间做了一个新闻APP,涉及到了列表视频播放,和腾讯新闻APP差不多,总结了一下代码,写了一个Demo来分享给大家. 用了 TabLayout+RecylerView+自定义视频控件完成的 ...
Python写网络爬虫爬取腾讯新闻内容
最近学了一段时间的Python,想写个爬虫,去网上找了找,然后参考了一下自己写了一个爬取给定页面的爬虫. Python的第三方库特别强大,提供了两个比较强大的库,一个requests, 另外一个Bea ...
Python 实现腾讯新闻抓取
原文地址:http://www.cnblogs.com/rails3/archive/2012/08/14/2636780.htm 思路: 1.抓取腾讯新闻列表页面: http://news.qq.c ...
android实现超酷的腾讯视频首页和垂直水平网格瀑布流一揽子效果
代码地址如下:http://www.demodashi.com/demo/13381.html 先来一波demo截图实现ListView.GridView.瀑布流 1.导入RecyclerView的 ...
简单的css缩放动画,仿腾讯新闻的分享按钮和美团app底部的图标样式
最近看到一些好看的hover的图形缩放效果.然后自己就写了下,发现这2种效果都不错.如果伙伴们更好的实现方式可以在下面留言哦~ 还有美团的效果,我就不展示了,喜欢的可以去app应用上看看. 这两种效果 ...

随机推荐

[转] Java 命令行交互-JCommander
[From] https://github.com/Sayi/sayi.github.com/issues/32 我喜欢简单,什么是简单?正如若干字符组成的命令行. 有时候我们用Java开发了一个小工 ...
Laravel 控制器 Controller 传值到视图 View 的几种方法总结
单个值的传递 with public function index() { $test = "测试"; return view('test.index')->with(' ...
UNIX SHELL基础知识总结(二)
1. vim,vi及ex的关系 vim不需要安装,vi为ex的“Visual Mode”,Vim是vi的高级版本: 2. Unix Shell 快捷键 Ctrl+a/e将光标定位到命令的头/尾 Ct ...
prim和kruskal算法
//邻接矩阵 int n,G[MAXV][MAXN]; int d[MAXV];//表示到树的距离 bool vis[MAXV]={false}; int prim(){ fill(d,d+MAXV, ...
lfs
LFS──Linux from Scratch,就是一种从网上直接下载源码,从头编译LINUX的安装方式.它不是发行版,只是一个菜谱,告诉你到哪里去买菜(下载源码),怎么把这些生东西( raw c ...
ionic3 引入第三方库（jquery）
安装 npm install jquery npm install @types/jquery 在需要的ts文件中引入,一定要在最顶端 import * as $ from '../../../nod ...
Js框架设计之DomReady
一.在介绍DomReady之前,先了解下相关的知识 1.HTML是一种标记语言,告诉我们这页面里面有什么内容,但是行为交互则要通过DOM操作来实现,但是注意:不要把尖括号里面的内容看作是DOM! 2. ...
Java学习之路(四)：面向对象
Java中的面向对象概念:面向对象的原本的意思是“”万物皆对象“” 面向对象思想的特点: 是一种更符合我们思想习惯的思想,将复杂的事情简单化使我们角色发生了转换,将我们从执行者变成了指挥者面向对 ...
2、编写/修改权限及执行Shell程序的步骤
学习目标编写Shell程序执行Shell程序正文Shell程序有很多类似C语言和其他程序设计语言的特征,但是又没有程序语言那样复杂.Shell程序是指放在一个文件中的一系列Linux命令和实用程序. ...
Java下的i++问题
在解决一道面试题目时遇到问题. public class Inc { public static void main(String args[]){ Inc inc = new Inc(); int ...

Swiper结合jQuery实现腾讯新闻首页

Swiper结合jQuery实现腾讯新闻首页的更多相关文章

随机推荐

热门专题