案例如何用jquery实现仿百度新闻焦点图
Posted 我分享我快乐
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了案例如何用jquery实现仿百度新闻焦点图相关的知识，希望对你有一定的参考价值。
像这样滚动的新闻焦点图如何实现？
代码如下
<!doctype html>
<html>
<head>
<script ></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 >
<img >
<img >
<img >
<img >
<img >
<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>
希望大家看过我的案例分享后能有所收获。如果大家喜欢哪类效果，还想看哪方面的哪类型的设计制作案例可以留言给我，有时间我一定会分享更多设计制作相关的内容给大家的。谢谢！
时刻提醒自己
不抱怨，多实践，终达成功彼岸！
我的座右铭：不能领跑也绝不放弃！
以上是关于案例如何用jquery实现仿百度新闻焦点图的主要内容，如果未能解决你的问题，请参考以下文章
如何用js实现一个横向滚动新闻？补充里已附图。求详细代码，不要太复杂的。最好使用div不要用table