专栏首页我分享我快乐jquery小案例分享-仿百度新闻焦点图

jquery小案例分享-仿百度新闻焦点图

<!doctype html>

<html>

<head>

<script src="jquery.js"></script>

<style>

body,dl,dd{margin:0;}

.container{width:480px;height:300px;overflow:hidden;position:relative;}

.container img{float:left;}

.container dl{background-image:none;position:absolute;bottom:0;left:0;width:98%;height:30px;line-height:30px;color:white;padding-left:2%}

.arrow_left,.arrow_right{display:block;width:41px;height:41px;position:absolute;top:50%;margin-top:-20px;cursor:pointer;}

.arrow_left{background-image:none;left:0;}

.arrow_right{background-image:none;right:0;}

</style>

<meta charset="utf-8">

<title>仿百度新闻焦点图</title>

</head>

<body>

<div class="container">

<img src="images/low_banner01.png">

<img src="images/low_banner02.png">

<img src="images/low_banner03.png">

<img src="images/low_banner04.png">

<img src="images/low_banner05.png">

<img src="images/low_banner06.png">

<dl>

<dd>新闻文本显示区-第1条新闻</dd>

<dd>新闻文本显示区-第2条新闻</dd>

<dd>新闻文本显示区-第3条新闻</dd>

<dd>新闻文本显示区-第4条新闻</dd>

<dd>新闻文本显示区-第5条新闻</dd>

<dd>新闻文本显示区-第6条新闻</dd>

</dl>

<span class="arrow_left" onselectstart="return false"></span>

<span class="arrow_right" onselectstart="return false"></span>

</div>

<script>

/*初始*/

$(".container img,.container dd").hide();

$(".container img:eq(0),.container dd:eq(0)").show();

/*定时器函数*/

var n = 0;

function changeImg(){

if(n<$(".container img").length-1){

n=n+1;

}else{

n=0;

}

$(".container img,.container dd").hide();

$(".container img:eq("+n+"),.container dd:eq("+n+")").show();

}

var timer = setInterval(changeImg,2000);

$(".container").hover(function(){

clearInterval(timer);

},function(){

timer = setInterval(changeImg,2000);

})

/*箭头控制*/

$(".arrow_left").click(function(){

if(n>0){n=n-1}else{n=$(".container img").length-1}

$(".container img,.container dd").hide();

$(".container img:eq("+n+"),.container dd:eq("+n+")").show();

})

$(".arrow_right").click(function(){

if(n<$(".container img").length-1){n=n+1;}else{n=0}

$(".container img,.container dd").hide();

$(".container img:eq("+n+"),.container dd:eq("+n+")").show();

})

</script>

</body>

</html>

本文分享自微信公众号 - 我分享我快乐(duan_uid),作者:段惠勇

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-03-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【案例】如何用jquery实现仿百度新闻焦点图

    .container{width:480px;height:300px;overflow:hidden;position:relative;}

    用户1730674
  • 免费视频分享-我的课程

    百度云地址:http://pan.baidu.com/s/1kUzmaRt ? 为在面试中用到jquery的同学,为在工作中要求你用jquery的同学,也...

    用户1730674
  • 【案例】炫酷光线交织Canvas特效

    今天段老师给同学们带来的是基于canvas 画板绘制彩色发光的光线交织背景动画特效。(是不是非常的炫酷)

    用户1730674
  • 【案例】如何用jquery实现仿百度新闻焦点图

    .container{width:480px;height:300px;overflow:hidden;position:relative;}

    用户1730674
  • 在ASP.NET MVC中使用Unity进行依赖注入的三种方式第一种方法第二种方法第三种方法

         在ASP.NET MVC4中,为了在解开Controller和Model的耦合,我们通常需要在Controller激活系统中引入IoC,用于处理用户请...

    小白哥哥
  • Docker学习总结之Run命令介绍 Operator exclusive options

    Docker学习总结之Run命令介绍 本文由Vikings(http://www.cnblogs.com/vikings-blog/) 原创,转载请标明.谢谢!...

    随机来个数
  • React 组件测试技巧

    在这个页面上,我们将主要使用函数组件。然而,这些测试策略并不依赖于实现细节,它对于 class 组件也同样有效。

    Fonkie
  • VBA解析VBAProject 04——run length encoding

    在VBAProject中,dir流以及VBA模块代码流都使用了run length encoding的算法进行压缩。

    xyj
  • 为什么旧金山的科技人才正准备回流纽约?

    这些高科技人才来到旧金山,导致房租上涨,现在他们又准备离开了。 至少,他们当中大部分人想要离开。来自人才招聘平台Woo.io的报告显示准备离开湾区的高科技人才...

    点滴科技资讯
  • Linux学习笔记(九)常用的网络命令

    英文原意:send ICMP ECHO_RE-QUEST to network hosts

    LRainner

扫码关注云+社区

领取腾讯云代金券