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应用上看看. 这两种效果 ...

随机推荐

ubuntu 使用ifupdown 进行高级网络设置
ifupdown ubuntu 本身支持linux的网络底层设置命令:ifconfig,route,ip 等命令,但为了让网络设置更加简单,Debian 提供了一个标准的高级网络设置工具,包含 ifu ...
leetcode 191：统计1的个数；5 最长回文串；54，59 蛇形矩阵
class Solution { public: int hammingWeight(uint32_t n) { ; //统计次数 ){ n &= (n-); //每次消掉一个1 k++; / ...
css实现视觉差的滚动
之前在逛知乎的时候,发现知乎app首页中偶尔掺杂的广告图片,都是做的视觉差的效果,广告图片的向上速度明显比外面页面的上拉速度慢了很多,看起来很炫酷,然后在网上看了下,发现有很多js插件可以实现这种效果 ...
linux如何安装yum
yum全称Yellow dog Updater Modified,yum的主要用途是对rpm包进行管理,包括安装.卸载.升级等.linux安装yum也较为简单,具体如下: 工具/原料 1.电脑: 2. ...
KB4284826 远程桌面发生身份验证错误，要求的函数不受支持
win -r -> run -> gpedit.msc 链接:https://www.zhangfangzhou.cn/authentication-error.html远程桌面发生 ...
GIF图制作
一.安装image 首先在cmd中敲入代码pip install imageio,以便制作动图二.安装完之后便可读取gif了在idle中输入代码 import imageio savename = ...
am335x uboot启动流程分析
基本指令含义 .globl _start .globl指示告诉汇编器,_start这个符号要被链接器用到,所以要在目标文件的符号表中标记它是一个全局符号 b,bl b是不带返回的跳转 bl带返回的跳 ...
CoreJava基础之构造器
类的基本语法: 修饰词 class 类名{ 修饰词类型属性名: } 实例:public class Book{ int id; String name; String[] authors ={&q ...
Objective-C中.h、.m、.mm的区别
.h :头文件.头文件包含类,类型,函数和常数的声明. .m :源代码文件.这是典型的源代码文件扩展名,可以包含Objective-C和C代码. .mm :源代码文件.带有这种扩展名的源代码文件, ...
Java TCP/IP与HTTP协议个人总结(原创)
首先举个例子方便理解: 1.应用层(http.ftp)就类似:淘宝.京东.易购等网购网站,主要用来负责选择购买商品(制定协议). 2.传输层(TCP.UDP)就类似:中通.申通等物流公司,主要负责传送 ...

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

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

随机推荐

热门专题