今天我们来说一下,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. python学习，day2：字典

    字典的增删改查 # coding=utf-8 # Author: RyAn Bi info = { 'stu1101':'Tenglan Wu', 'stu1102':'longze Luola', ...

  2. TP5.1 查看具体版本

    https://blog.csdn.net/haibo0668/article/details/80865785 echo \think\facade\App::version(); composer ...

  3. dubbo核心流程一览

    整体设计 图中从下至上分为十层,各层均为单向依赖,右边的黑色箭头代表层之间的依赖关系,每一层都可以剥离上层被复用,其中,Service 和 Config 层为 API,其它各层均为 SPI. Serv ...

  4. 最近总想着写一个模拟alert和confirm插件，代替原生的

    msgbox-confirm github:  https://github.com/tong-mikasa/msgbox-confirm 主要js代码,scss代码 (function($) { $ ...

  5. Qt4.8.5移植

    这两天搞了Qt移植 因为不小心 耽误了挺多时间 但是也比较好的掌握了   现在记录一下 准备工具: tslib-1.16 qt-everywhere-opensource-src-4.8.5.tar ...

  6. UCF约束介绍

    约束 (一)约束的分类: 利用FPGA进行系统设计常用的约束主要分为3类. (1)时序约束:主要用于规范设计的时序行为,表达设计者期望满足的时序条件,知道综合和布局布线阶段的优化算法等. (2)布局布 ...

  7. unity 渲染第一步

    unity 不是将宇宙投影到水晶球里,而是:将整个 view frustum 投影成 一个 cube .------ <unity 渲染箴言> 观察一下,整个 view frustum 以 ...

  8. spring异常被吞的一种情形

    你是否遇到过下面的情况,控制台无限的输出下面的日志: Logging initialized using ‘class org.apache.ibatis.logging.log4j.Log4jImp ...

  9. golang基础--Array数组

    基本特性 格式: var Name [n]<type>,n>0 如: var a [10]int 表示,定义一个长度为10,元素类型为int性的数组 数组长度: 长度(len)也是数 ...

  10. PyQt5 应用在 TeamViewer 下无法使用全屏模式

    PyQt5 应用在 TeamViewer 下无法使用全屏模式 问题描述 使用 PyQt5 (版本为 5.7)中的 QtWebEngineView 构建的桌面应用,部署到远程机器(Windows 7 平 ...