模仿abcnews.com制作新闻(图片展示）

goby2008

浏览: 604643 次

最近访客更多访客>>

jAmEs_

k-ping

fygday

bill1

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript Go ASP XHTML CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
body, ul,li,div, img{ margin:0; padding:0; border:0; font:11px Arial, Helvetica, sans-serif; color:#003063}
ul,li{ list-style:none}
a:link,a:visited{color:#003063; text-decoration:none}
a:hover{color:#003063; text-decoration:underline}
a:active{color:#003063; text-decoration:none}
body{ margin-left:200px; margin-top:50px}
.news_list{ width:350px; padding-bottom:12px; float:left}
.news_list li{ padding-left:15px; line-height:24px;overflow:hidden; height:24px; font-size:14px; background:#FFF; }
.news_list li.selected{border:1px solid #BDBEBD; border-left:1px solid #fff; height:22px;  margin-left:-1px; position:relative;}
.news_list li.selected a{color:red;}
.news_info{ float:left; width:510px;overflow:hidden; position:relative; height:346px; border:1px solid silver;}
.news_info #picNav img{float:left;}
.news_info #picNav{overflow:hidden; height:342px; position:absolute; width:3060px; border:1px solid red;}
.btn{ width:40px; height:20px;background:#FFF; opacity:0.7; filter:alpha(opacity=70); display:block; text-align:center; position:absolute; bottom:20px; line-height:20px; font-size:14px;}
.btn:hover{background:red;}
.l{ right:80px}
.r{ right:30px}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="news_info" id="info">
	<div id="picNav">
		<a href=ss><img src="http://www.blueidea.com/articleimg/2008/01/5257/01.jpg"/></a>
		<img src="http://www.blueidea.com/articleimg/2008/01/5257/02.jpg"/>
		<img src="http://www.blueidea.com/articleimg/2008/01/5257/03.jpg"/>
		<img src="http://www.blueidea.com/articleimg/2008/01/5257/04.jpg"/>
		<img src="http://www.blueidea.com/articleimg/2008/01/5257/05.jpg"/>
		<img src="http://www.blueidea.com/articleimg/2008/01/5257/03.jpg"/>
	</div>
	<a href="javascript:void(0)" class="btn l" id="toleft">&lt;&lt;</a>
	<a  href="javascript:void(0)" class="btn r" id="toright">&gt;&gt;</a>
</div>
<ul class="news_list" id="news_list">
	<li class="selected"><a href="#">当遇上不归路，你是从容面对还是放弃？</a></li>
	<li><a href="#">我控制不了别人的情绪，但我可以控制着我的微笑... ...</a></li>
	<li><a href="#">好事总是多磨，让多磨的坏事成为我们回忆的点滴... ... </a></li>
	<li><a href="#">让我们2008遇见幸福...</a></li>
	<li><a href="#">呵呵，来自diginon的图片。意境很好。</a></li>
	<li><a href="#">链接地址是http://www.blueidea.com/photo/gallery/2008/5257.asp</a></li>
</ul>
</body>
<script>
var $ = function(_){return typeof(_)=="string"?document.getElementById(_):null;}
var EACH = function(o,fn){for(var i=0;i<o.length;i++){fn.call(o[i],i,o); if(i==o.length-1) return o}}//遍历
function CG(t,b,c,d){return(c*((t=t/d-1)*t*t*t*t + 1) + b)}
var picNav = $("picNav"), H = 510, total=6,num=0,timer=null,pause=2000,finish=false;
function PLAY(o,f,t){ //o:element,f:from,t:to,d:duration
	var tim=0,timHander=null,d=100;
	void function(){
		picNav.style.left = Math.ceil(CG(tim,f,t-f,d)) + "px";
		tim<d ? (tim++ , finish=false, timHander=setTimeout(arguments.callee, 10)):clearTimeout(timHander);
		finish=(tim==d?true:false);
	}();	
}
function GOGOGO(){
	num > (total-1)?(PLAY(picNav,-total*H,0),num=0):PLAY(picNav,-num*H,-(num+1)*H);
	setSelect(num); num++;
	timer = setTimeout(arguments.callee,pause);
}
function go(dir){
	var M = parseInt(picNav.style.left);clearTimeout(timer);
	if(dir == -1){ if(num <=0)return; PLAY(picNav,M,M+H);}
	if(dir == 1){ if(num >= total-1) return; PLAY(picNav,M,M-H)}
	num +=dir;
	setSelect(num);
	timer = setTimeout("GOGOGO()",pause);
}
function setSelect(n){
	EACH($("news_list").getElementsByTagName("li"),function(i,o){
		this.className = (i==n?"selected":"");
	});
}
GOGOGO();
$("toleft").onmouseover = $("toright").onmouseover = function(){clearTimeout(timer)}
$("toleft").onclick = function(){finish && go(-1);}
$("toright").onclick = function(){finish && go(1);}
</script>
</html>

分享到：

Factory Method Pattern (工厂方法模式) | web2.0按钮制作教程

2009-06-23 22:07
浏览 1140
评论(2)
查看更多

2 楼 goby2008 2009-06-26

这只是转载别人的文章，可能没留意，谢谢你的提醒！

1 楼 netfork 2009-06-23

网址拼错了：abcnews.com

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

模仿abcnews.com制作新闻(图片展示）

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

模仿abcnews.com制作新闻(图片展示）

评论

发表评论

相关推荐

JQuery限制复选框checkbox可选中个数

IE和Firefox兼容的iframe刷新

Firefox和IE之间7个JavaScript的差异

JS实用代码

jQuery.inArray注意事项

CKEditor配置使用

通过js读取或设置 FCKeditor中的值 js操作fckeditor

关于用CSS区分Firefox、IE6、IE7

js 动态创建select 并赋予onchange事件

javascript对话框(弹出层)组件artDialog

用JavaScript检查文件是否存在

JavaScript打印

JavaScript, AJAX树形控件大全(all kinds of TreeView Controls by JavaScript, AJAX)

javascript获取ul中li的个数

location.hash实现跨域iframe自适应

15个基于Web的HTML编辑器

父页面里两个iframe之间互相访问

JS压缩处理

常用的js正则表达式

用lightbox点亮html

最近访客更多访客>>