今天我们来说一下,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. 将SQLAlchemy对象转化为dict

    需求一,将数据对象转为dict,但是不包括relation, import BaseClass #所有模型的基础类 def getDictFromObj_nr(obj): return_dict={} ...

  2. openstack的部署与运维

    来公司几个月了,除了搭建了kvm虚拟机,使用3台虚拟机组合成一个openstack的网络环境.还没有正式将openstack搭建起来过.时间都在开发web程序.不过openstack也是要学习的.只能 ...

  3. 设计模式 — 建造者（生成器）模式（Builder）

    考虑这样一种业务场景,我们构建一个业务对象,但是这个业务对象及其复杂.为了代码的根号的可读性,我们会把这个对象的构建过程根据精密联系的程度来拆分成几个类来完成.最后再放到一起使用来生成复杂对象.这个业 ...

  4. 微信小程序通过background-image设置背景图片

    微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片:base64图片设置步骤如下:1.在网站http://imgbase64.duoshitong ...

  5. 高阶篇：4.1.2.3）产品零件级别的QFDII

    本章目的:介绍产品零件级别的QFDII编写方法. 1.前言 这章接前面部件级别的QFDII. 产品零件级别的QFDII,其实就是将零件QFDII所得到的设计要求,进一步分配零件的特征(Part Cha ...

  6. selenium 多窗口(windows)及ITargetLocator使用总结

    1. selenium能实现窗口切换的原理 2. 常见命令 2.1 WindowHandle 2.2 WindowHandles 2.3 SwitchTo 3. 使用JavaScript新建窗口 4. ...

  7. Jmeter测试计划中的元素

    测试计划中的元素(elements of a test plan) 本节描述测试计划不同的部分. 最小测试将包括测试计划.线程组和一个或多个采样器. 1 测试计划(Test Plan) 测试计划对象有 ...

  8. PHP中的PHP_EOL和DIRECTORY_SEPARATOR

    1. PHP_EOL是php中的换行符,跨平台 1.1.换行符: unix系列用 \n windows系列用 \r\n mac用 \r PHP中可以用PHP_EOL来替代,以提高代码的源代码级可移植性 ...

  9. DateTime.Now与DateTime.Today的区别

    区别如下图: DateTime.Now: 不仅显示日期 还显示当前时间: DateTime.Today: 只显示当前日期,没有时间

  10. html中 alt 和 title 的区别

    alt 用来给图片来提示的(图片载入失败时以文本形式提示). Title用来给链接文字或普通文字提示的(在鼠标放上去的时候就会提示).