今天我们来说一下,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实现腾讯新闻首页的更多相关文章

  1. Python爬取腾讯新闻首页所有新闻及评论

    前言 这篇博客写的是实现的一个爬取腾讯新闻首页所有的新闻及其所有评论的爬虫.选用Python的Scrapy框架.这篇文章主要讨论使用Chrome浏览器的开发者工具获取新闻及评论的来源地址. Chrom ...

  2. 腾讯新闻多图jQuery相册展示效果代码

    腾讯新闻多图jQuery相册代码,带左右切换箭头,带缩略图,可左右切换,点击缩略图展示原图. 在线演示本地下载

  3. 【Android UI设计与开发】7.底部菜单栏（四）PopupWindow 实现显示仿腾讯新闻底部弹出菜单

    前一篇文章中有用到 PopupWindow 来实现弹窗的功能.简单介绍以下吧. 官方文档是这样解释的:这就是一个弹出窗口,可以用来显示一个任意视图.出现的弹出窗口是一个浮动容器的当前活动. 1.首先来 ...

  4. 基于jQuery的新浪游戏首页幻灯片

    分享一款基于jQuery的新浪游戏首页幻灯片,带左右箭头,选项卡缩略图,自动轮播切换的jQuery幻灯片代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <br>& ...

  5. Android------视频播放器（包含全屏播放，快退，快进，腾讯新闻的列表播放等）

    前段时间做了一个新闻APP,涉及到了列表视频播放,和腾讯新闻APP差不多,总结了一下代码,写了一个Demo来分享给大家. 用了  TabLayout+RecylerView+自定义视频控件  完成的 ...

  6. Python写网络爬虫爬取腾讯新闻内容

    最近学了一段时间的Python,想写个爬虫,去网上找了找,然后参考了一下自己写了一个爬取给定页面的爬虫. Python的第三方库特别强大,提供了两个比较强大的库,一个requests, 另外一个Bea ...

  7. Python 实现腾讯新闻抓取

    原文地址:http://www.cnblogs.com/rails3/archive/2012/08/14/2636780.htm 思路: 1.抓取腾讯新闻列表页面: http://news.qq.c ...

  8. android实现超酷的腾讯视频首页和垂直水平网格瀑布流一揽子效果

    代码地址如下:http://www.demodashi.com/demo/13381.html 先来一波demo截图 实现ListView.GridView.瀑布流 1.导入RecyclerView的 ...

  9. 简单的css缩放动画,仿腾讯新闻的分享按钮和美团app底部的图标样式

    最近看到一些好看的hover的图形缩放效果.然后自己就写了下,发现这2种效果都不错.如果伙伴们更好的实现方式可以在下面留言哦~ 还有美团的效果,我就不展示了,喜欢的可以去app应用上看看. 这两种效果 ...

随机推荐

  1. 《UltraFast设计法实践》系列目录

    最近准备开始潜心学习快速和高效的时序收敛设计了,突然想就把整个学习过程做成一个博客系列吧,虽然想想就很激动(技术狗就这么点出息--),但希望坚持下来. 这篇做个目录或者索引,不断向其中添加学习内容. ...

  2. JAVA数据结构--优先队列（堆实现）

    优先队列(堆)的定义 堆(英语:Heap)是计算机科学中一类特殊的数据结构的统称.堆通常是一个可以被看做一棵树的数组对象.在队列中,调度程序反复提取队列中第一个作业并运行,因为实际情况中某些时间较短的 ...

  3. 使用Appium-Desktop捕获APP元素控件实现自动化控制

    使用Appium捕获APP的元素控件 实现自动化控制 我是用的是华为P20手机进行测试,为了映射出它的adb端口,需再去官网下载安装一个华为手机助手,然后将手机调成开发者模式,连接时选择传输文件模式. ...

  4. iview2.0 bug之+8 区的 DatePicker

    请看以上细节图:工作案例小Demo 用心去做,不留遗憾!

  5. 推荐-Everything搜索工具

    简介: windows操作系统下极其强大的文件搜索工具. 下载: https://www.voidtools.com/downloads/ 推荐理由: 速度之快难以想象,日常工作必备工具之一. 发现的 ...

  6. 文献综述十四：基于Oracle11g的超市进销存管理系统设计与实现

    一.基本信息 标题:基于Oracle11g的超市进销存管理系统设计与实现 时间:2016 出版源:技术创新 文件分类:对数据库的研究 二.研究背景 为超市设计开发的超市管理系统,采用的是 VC+ Or ...

  7. CSS中margin属性

    css中margin块级元素的垂直相邻外边距会合并,比如 方框的上下外边距并不是2px,而是合并为1px了. 设置float属性就可以避免这种同级元素边距合并

  8. DP Intro - poj 1947 Rebuilding Roads

    算法: dp[i][j]表示以i为根的子树要变成有j个节点的状态需要减掉的边数. 考虑状态转移的时候不考虑i的父亲节点,就当不存在.最后统计最少减去边数的 时候+1. 考虑一个节点时,有两种选择,要么 ...

  9. c++ 网络编程（六）LINUX下 socket编程 多播与广播 实现一次发送所有组客户端都能接收到

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/9614288.html 一.多播 锲子:有这么一种情况,网络电台可能需要同时向成千上万的用户传输 ...

  10. 【ExtJS】一些基本概念的梳理

    学习ExtJS有一段时间了,一些相关知识点虽然每天都在用,不过如果猛的一问起来还是会一愣,趁现在好好梳理下吧.长期修改添加,弄清楚什么就加入什么. 1.Ext.onReady(): onReady() ...