仿土豆网首页效果, 焦点图片切换效果 [复制链接]

dianfish　楼主

佐佐

中级会员 

帖子: 163
体力: 451
威望: 18

发表于 2008-8-29 16:05:34 |显示全部楼层

突然看到土豆网首页图片轮换效果很漂亮, 于是就想动手学学那轮换效果的制作, 而土豆上是flash制作的, 借鉴下pageChang想法, 用js也可实现, 暂先把这种焦点轮换命名为FocusChange.

1.对焦点图片下方进行透明处理.兼容ie6 ie7 ff透明效果
2.通过鼠标移动到不同的四小图片时,通过改变图片所处父节点id=focus_change_list的left值取得效果
3.默认下每5秒执行一次函数autoFocusChange(),来实现图片自动变换

<!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>byzuo.cn---焦点图片 </title>
<style type="text/css">
/* Reset style */
* { margin:0; padding:0; word-break:break-all; }
body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size:1em; }
a { color:#039; text-decoration:none; }
	a:hover { text-decoration:underline; }
ul, li { list-style:none; }
fieldset, img { border:none; }
em, strong, cite, th { font-style:normal; font-weight:normal; }

/* Focus_change style */
#focus_change { position:relative; width:450px; height:295px; overflow:hidden; margin:20px 0 1px 60px; }
	#focus_change_list { position:absolute; width:1800px; height:295px; }
		#focus_change_list li { float:left; }
		#focus_change_list li img { width:450px; height:295px; }
	.focus_change_opacity { position:absolute; width:450px; height:70px; top:225px; left:0; background:#000; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; }
	#focus_change_btn { position:absolute; width:450px; height:65px; top:225px; left:0; }
		#focus_change_btn ul { padding-left:5px; }
		#focus_change_btn li { display:inline; float:left; margin:0 15px; padding-top:12px; }
		#focus_change_btn li img { width:76px; height:50px; border:2px solid #888; }
		#focus_change_btn .current { background:url(http://www.byzuo.cn/demo/focus_change/img/icon_arrow.gif) no-repeat 37px 8px;}
		#focus_change_btn .current img { border-color:#EEE; }

</style>

function classNormal(){
	var focusBtnList = $('focus_change_btn').getElementsByTagName('li');
	for(var i=0; i<focusBtnList.length; i++) {
		focusBtnList[i].className='';
	}
}

setInterval('autoFocusChange()', 5000);
function autoFocusChange() {
	var focusBtnList = $('focus_change_btn').getElementsByTagName('li');
	for(var i=0; i<focusBtnList.length; i++) {
		if (focusBtnList[i].className == 'current') {
			var currentNum = i;
		}
	}
	if (currentNum==0 ){
		moveElement('focus_change_list',-450,0,5);
		classNormal()
		focusBtnList[1].className='current'
	}
	if (currentNum==1 ){
		moveElement('focus_change_list',-900,0,5);
		classNormal()
		focusBtnList[2].className='current'
	}
	if (currentNum==2 ){
		moveElement('focus_change_list',-1350,0,5);
		classNormal()
		focusBtnList[3].className='current'
	}	
	if (currentNum==3 ){
		moveElement('focus_change_list',0,0,5);
		classNormal()
		focusBtnList[0].className='current'
	}
}

window.onload=function(){
	focusChange();
}
</script>
</head>

提示：您可以先修改部分代码再运行

本人能力有限, 不足之处, 欢迎大家提出批评指正

你也可以预览:http://www.byzuo.cn/demo/focus_change/index.html

[ 本帖最后由 dianfish 于 2008-8-31 11:55 编辑 ]

已有 1 人评分	威望	收起理由
zhuyinhong	+ 1	谢谢分享

总评分: 威望 + 1 查看全部评分

GTalk: icarrien@gmail.com

		自动登录	找回密码
密码			注册

仿土豆网首页效果, 焦点图片切换效果 [复制链接]

你这个确实可以用，我嵌入后能够运行。请帮我忙解决下面的问题把！拜托

仿土豆网首页效果, 焦点图片切换效果

浏览过的帖子

浏览过的版块