发个惠谱的Banner特效
<script type= "text/javascript ">
var CMenu = function () {
//滑动效果
this.initialize.call(this, arguments);
};
CMenu.prototype = {
initialize : function (arg) {
//初始化参数
var wc = this;
wc.time = arg[0]; //初始化滑动延迟时间
wc.timer = 0; //初始化记时器存储变量
wc.img = null; //初始化图片为空
wc.color = null; //普通数组
wc.titles = null; //标题数组
wc.database = null; //数据组
wc.Image = []; //图片缓存组
wc.content = { left : [], center : [], right : [] }; //初始化内容
wc.root = null; //根标记
wc.now = null; //初始化当前目标成员
wc.overborder = "#FFFFFF "; //鼠标经过边框颜色
wc.initborder = "#CCCCCC "; //默认的边框颜色
wc.initcolor = "#DFDFDF "; //默认的背景颜色
},
set_content : function (id) {
//设置内容
var wc = this, con = wc.content, dat = wc.database;
con.left[1].innerHTML = dat[id].left.title;
con.center[1].innerHTML = dat[id].center.title;
wc.set_value(con.left[2], dat[id].left.value);
wc.set_value(con.center[2], dat[id].center.value);
if (dat[id].right) {
con.center[0].style.marginRight = "170px ";
con.right[0].style.display = "block ";
con.right[1].innerHTML = dat[id].right.title;
wc.set_value(con.right[2], dat[id].right.value);
} else {
con.center[0].style.marginRight = "10px ";
con.right[0].style.display = "none ";
}
wc.img.src = wc.Image[id].src;
},
set_color : function (div, id) {
//设置颜色
var wc = this;
if (wc.now) {
with (wc.now.style) {
borderColor = wc.initborder;
backgroundColor = wc.initcolor;
}
}
with (div.style) {
//设置样式
borderColor = wc.overborder;
wc.root.style.backgroundColor = backgroundColor = wc.color[id];
}
},
set_value : function (con, dat) {
//付值内容
con.innerHTML = dat.join( " <br \/> ");
},
show : function (div) {
//设置选中成员
var wc = this;
wc.timer = 0; //清空记时器
if (wc.now == div) return;
wc.set_color(div, div.t_id);
wc.set_content(div.t_id);
wc.now = div; //给选中成员重新付值
},
look : function (div, a) {
//延迟控制
var wc = this;
if (wc.timer != 0) window.clearTimeout(wc.timer); //如果有记时器清除
wc.timer = window.setTimeout(function () { //重新设置记时器
wc.show(div); //到时间显示
}, wc.time);
},
load : function (images) {
//加载所有图片
var wc = this, i;
for (i = 0 ; i < images.length ; i ++) {
wc.Image[i] = new Image();
wc.Image[i].src = images[i];
}
},
add : function (id, div) {
//添加成员
var wc = this;
div.t_id = id;
div.onmouseover = function () {
//覆盖鼠标经过函数
wc.look(div);
};
div.onmouseout = function () {
//覆盖鼠标离开函数
if (wc.timer) {
window.clearTimeout(wc.timer);
wc.timer = 0;
}
};
},
parse : function (root) {
//解释整体
var ie = /MSIE/.test(window.navigator.userAgent) ? 1 : 2; //控制兼容
var wc = this, content = wc.content, items = root.childNodes,
titles = items[1 * ie + ie - 1].getElementsByTagName( "span "), //获取标题SPAN元素集合
contents = items[2 * ie + ie - 1].getElementsByTagName( "div "), i; //获取内容DIV元素集合
wc.img = items[0 * ie + ie - 1].childNodes[0], wc.root = root; //获取IMG元素 还有底层DIV元素
content.left = [contents[0], contents[1], contents[2]]; //获取内容左部分
content.center = [contents[6], contents[7], contents[8]]; //获取内容中部分
content.right = [contents[3], contents[4], contents[5]]; //获取内容右部分
for (i = 0 ; i < titles.length ; i ++) titles[i].innerHTML = wc.titles[i]; //给SPAN标题元素写入数据
titles = items[1 * ie + ie - 1].getElementsByTagName( "div "); //重新获得标题DIV集合
for (i = 0 ; i < titles.length ; i ++) wc.add(i, titles[i]); //给标题DIV集合添加方法
wc.now = titles[0]; //设置默认选中为标题集合下标为0的元素
wc.set_color(wc.now, 0);
wc.set_content(0);
wc.img.style.display = "block ";
}
};
window.onload = function () {
var wc = new CMenu(500);
//加载所有图片
wc.load( "http://env.people.com.cn/mediafile/200706/06/P200706061320422654822326.jpg,http://env.people.com.cn/mediafile/200706/05/F200706050304259437231061.jpg,http://env.people.com.cn/mediafile/200706/06/F200706060915361600912592.jpg,http://www.cenews.com.cn/news/2007-06-05/1.jpg,http://2008.people.com.cn/mediafile/200706/05/F200706050939236297208552.jpg ".split( ", "));
wc.titles = "标题一的说,标题二的说,标题三的说,标题四的说,标题五的说 ".split( ", "); //设置所有标题
wc.color = "#00CC00,#666600,#00CCFF,#FFCC00,#FF0000 ".split( ", "); //设置所有颜色
wc.database = [ //加载所有数据
{
left : {
title : "左边标题1 ", value : [
"内容1_1 ", "内容1_2 ", "内容1_3 "
]
},
center : {
title : "中间标题1 ", value : [
"内容1_4 ", "内容1_5 ", "内容1_6 "
]
},
right : {
title : "右边标题1 ", value : [
"内容1_7 ", "内容1_8 ", "内容1_9 "
]
}
},
{
left : {
title : "左边标题2 ", value : [
"内容2_1 ", "内容2_2 ", "内容2_3 "
]
},
center : {
title : "中间标题2 ", value : [
"内容2_4 ", "内容2_5 ", "内容21_6 "
]
}
},
{
left : {
title : "左边标题3 ", value : [
"内容3_1 ", "内容3_2 ", "内容3_3 "
]
},
center : {
title : "中间标题3 ", value : [
"内容3_4 ", "内容3_5 ", "内容3_6 "
]
},
right : {
title : "右边标题3 ", value : [
"内容3_7 ", "内容3_8 ", "内容3_9 "
]
}
},
{
left : {
title : "左边标题4 ", value : [
"内容4_1 ", "内容4_2 ", "内容4_3 "
]
},
center : {
title : "中间标题4 ", value : [
"内容4_4 ", "内容4_5 ", "内容4_6 "
]
}
},
{
left : {
title : "左边标题5 ", value : [
"内容5_1 ", "内容5_2 ", "内容5_3 "
]
},
center : {
title : "中间标题5 ", value : [
"内容5_4 ", "内容5_5 ", "内容5_6 "
]
},
right : {
title : "右边标题5 ", value : [
"内容5_7 ", "内容5_8 ", "内容5_9 "
]
}
}
];
wc.parse(document.getElementById( "CMenu_Root ")); //分析对象
wc = null;
};
</script>
[解决办法]
偶也写了一个，不过我是初学这个，不知道哪个更好
<html>
<head>
<title> </title>
<style type= "text/css ">
<!--
body{border:0px; margin:0px;}
.divimg{ width:400px; height:250px; border:0px; margin:0px;}
.divMenu{ width:400px; border:0px; margin:0px;}
.menu{ width:99px; margin:0px; float:left; background-color:#999999; border-right:1px solid #fff;}
.menu1{ width:99px; margin:0px; float:left; background-color:#009900;border-right:1px solid #fff;}
.menu2{ width:99px; margin:0px; float:left; background-color:#336699;border-right:1px solid #fff;}
.menu3{ width:99px; margin:0px; float:left; background-color:#996699;border-right:1px solid #fff;}
.menu4{ width:99px; margin:0px; float:left; background-color:#66CC33;}
#tab_1{width:400px; height:200px; border:0px solid #333; background-color:#009900; display:block;}
#tab_2{width:400px; height:200px; border:0px solid #333; background-color:#336699; display:none;}
#tab_3{width:400px; height:200px; border:0px solid #333; background-color:#996699; display:none;}
#tab_4{width:400px; height:200px; border:0px solid #333; background-color:#66CC33; display:none;}
-->
</style>
<script type= "text/javascript ">
<!--
//=======================================================
//函数名称：getObject(objectId)
// 参数objectId:控件的ID值
//函数功能：获得控件的ID值
//返 回 值：ture(获得ID值) false(获取ID失败)
//=======================================================
function getObject(objectId) {
if(document.getElementById && document.getElementById(objectId))
{
// W3C DOM
return document.getElementById(objectId);
}
else if (document.all && document.all(objectId))
{
// MSIE 4 DOM
return document.all(objectId);
}
else if (document.layers && document.layers[objectId])
{
// NN 4 DOM.. note: this won 't find nested layers
return document.layers[objectId];
}
else
{
return false;
}
}
function change(menu_num)
{
var menuNum = menu_num - 1;
var arr1 = new Array(4);
arr1[0] = "tab_1 ";
arr1[1] = "tab_2 ";
arr1[2] = "tab_3 ";
arr1[3] = "tab_4 ";
var arr2 = new Array(4);
arr2[0] = "menu1 ";
arr2[1] = "menu2 ";
arr2[2] = "menu3 ";
arr2[3] = "menu4 ";
var img = new Array(4);
img[0] = "ad-01.jpg ";
img[1] = "ad-02.jpg ";
img[2] = "ad-03.jpg ";
img[3] = "ad-04.jpg ";
for ( i = 0; i < 4; i++)
{
if (menuNum == i)
{
getObject(arr1[i]).style.display = "block ";
getObject(arr2[i]).className = arr2[i];
getObject( "img ").src = img[i];
}
else
{
getObject(arr1[i]).style.display = "none ";
getObject(arr2[i]).className = "menu ";
}
}
}
-->
</script>
</head>
<body>
<div class= "divMenu ">
<img id= "img " src= "ad-01.jpg " width= "400px " height= "250px; ">
</div>
<div class= "divMenu ">
<div id= "menu1 " class= "menu " onMouseOver= "change(1) ">
menu1
</div>
<div id= "menu2 " class= "menu " onMouseOver= "change(2) ">
menu2
</div>
<div id= "menu3 " class= "menu " onMouseOver= "change(3) ">
menu3
</div>
<div id= "menu4 " class= "menu " style= "border-right:0px; " onMouseOver= "change(4) ">
menu4
</div>
</div>
<div>
<div id= "tab_1 ">
内容1
</div>
<div id= "tab_2 ">
内容2
</div>
<div id= "tab_3 ">
内容3
</div>
<div id= "tab_4 ">
内容4
</div>
</div>
</body>
</html>
[解决办法]
分太少，接分！ :)
[解决办法]
jf
[解决办法]
学习中。
