求助 网页的JS和JQ功能无法同时实现了

[KyKiske22]

就是这里的图片切换js和子菜单实现的jq无法同时实现了，
求大大帮忙。或者写出了对应我的css写出个子菜单实现的js也行。
代码如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>XXXXXXXXXXXXXX</title>

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
<script src="js/superfish.js"></script>
<script src="js/hoverIntent.js"></script>
<script type="text/javascript">
$(document).ready(function(){$("ul.menu0").superfish();});/*子菜单浮现*/
</script>
<!--<script src="js/RevealTrans.js"></script>这句话！实现了js jq就无法实现-->
</head>
<body>
<style type="text/css">
body { font:12px Tahoma;margin:0px;text-align:left;background:white;}
/*头栏*/
#Top { position:absolute; left:0%; width:100%; height:42px; background:black;}

/*收藏*/
#收藏栏 { }
.save ul{ float:right;width:100%;padding:0; margin:0;list-style-type:none;}
.save li{ display:inline;}
.save a{ float: right;width:80px;color:white;}

/*导航栏*/
#导航栏{ z-index:10;}
.menu ul{ float:left;width:100%;padding:0;margin:0;list-style-type:none;background-color:gray;}
.menu ul li{ float:left;position:relative;} /*菜单的内容为作浮动横排显示，位置定义为相对位置意味着它的下级ul ul的形式均匀化*/
.menu ul li:hover ul,/*让鼠标悬浮在第一个li上会显示下一季的ul表*/
.menu ul ul{ visibility:hidden;position:absolute;left:0%;top:100%; z-index:10;}/*定义下拉菜单的位置和布局*/
.menu ul a:hover ul{ visibility:visible;}/*鼠标滑到第一级ul后能显示下一级ul链接*/

.menu ul a{ float:left;width:150px;text-decoration:none;color:white;background-color:gray;padding:5px 8px;border-right:1px solid white;}/*母ul的浮动，链接大小，下划线，字体颜色，背景颜色，收缩状况，右边的分割条*/
.menu ul a:hover { background-color:blue;}/*鼠标滑动到母ul后的链接形式*/
.menu ul ul li a{ float:left;width:150px;text-decoration:none;color:white;background-color:gray;padding:5px 8px;border-right:1px solid gray;}/*子ul的浮动，链接大小，下划线，字体颜色，背景颜色，收缩状况，右边的分割条*/
.menu ul ul li a:hover { background-color:blue;}/*鼠标滑动到子ul后的链接形式*/

/*页面头部*/
#Head { position:absolute;top:55px;z-index:0; left:1%; right: 1%;
width:884px;height:186px; margin:auto; border: 2px solid #000000}
.pictures{
width:100%;
height:100%;
}

#idPicList img{
width:0px;height:0px;
}

#idPicList img.on{
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

#idNum{ position:absolute; right:5px; bottom:5px;}
#idNum li{
float: left;
list-style:none;
color: #fff;
text-align: center;
line-height: 16px;
width: 16px;
height: 16px;
font-family: Arial;
font-size: 12px;
cursor: pointer;
margin: 1px;
border: 1px solid #707070;
background-color: #060a0b;
}
#idNum li.on{
line-height: 18px;
width: 18px;
height: 18px;
font-size: 14px;
border: 0;
background-color: #ce0609;
font-weight: bold;
}

/*页面主体*/
#PageFrame{ position: absolute;top:265px;left:1%; right:1%;
width:874px;height:720px; margin:auto;
border:5px solid gray;border-radius:25px;}

/*边框元素*/
#AuxiliaryFrame{ text-align:left; float: left; clear:left; overflow:hidden;
width:29%; height:700px;
border-right:5px solid gray;}
/*边框元素布局*/
#AuxiliaryFramePosition{ position:absolute;top:45px;left:42px;right:7%;
width: 180px;height: 517px;
border:2px solid gray;border-radius:25px;}
#AuxiliaryFrameContent { position:absolute;top: 60px;left: 16px;right:13%;
width:147px;
height:133px;}

#AuxiliaryFrameDrawings{ position: absolute; top:286px; left:24px; right:5%;
width:137px; height:67px;}

/*主体元素*/
#MainPageFrame{ text-align:left; float: right; clear:right; overflow:hidden;
width:70%;height:700px; }

/*主体元素布局*/
#MainPageFramePosition { position: absolute; top: 42px; left:319px;
width:522px; height:516px;
border:2px solid #a1a1a1;
border-radius:25px;}
#MainPageFrameDrawing1 { position:absolute; top:38px; left:21px;
width:170px; height:177px;}
#MainPageFrameDrawing2 { position:absolute; top:236px; left:22px;
width:169px; height:144px;}
#MainPageFrameContent { position:absolute; top:43px;left:217px;
width:276px;height:371px;
border:2px solid #a1a1a1;
border-radius:25px;/*边框设成圆弧状*/
box-shadow: 10px 10px 5px #888888;/*边框出现阴影*/}

/*页面底部*/
#Bottom { position: absolute;top:702px;bottom:0%;left:0%;width:100%;height:80px; color:white;
background:black; border-top:4px solid gray;}

</style>

<div id="Top">
<div id="收藏栏" class="save">
<ul>
<li><div align="center"><a href="#">设为首页</a></div></li>
<li><div align="center"><a href="#">加入收藏</a></div></li>
</ul>
</div>

<div id="导航栏" class="menu">
<ul id="navigation" class="menu0">
<li><div align="center"><a href="#">首页</a></div></li>
<li><div align="center"><a href="#">老大</a></div>
<ul>
<li><div align="center"><a href="#">A</a></div></li>
<li><div align="center"><a href="#">B</a></div></li>
<li><div align="center"><a href="#">C</a></div></li>
<li><div align="center"><a href="#">D</a></div></li>
</ul>
</li>
<li><div align="center"><a href="#">老二</a></div>
<ul>
<li><div align="center"><a href="#">A</a></div></li>
<li><div align="center"><a href="#">B</a></div></li>
<li><div align="center"><a href="#">C</a></div></li>
<li><div align="center"><a href="#">D</a></div></li>
</ul>
</li>
<li><div align="center"><a href="#">老三</a></div>
<ul>
<li><div align="center"><a href="#">A</a></div></li>
<li><div align="center"><a href="#">B</a></div></li>
<li><div align="center"><a href="#">C</a></div></li>
<li><div align="center"><a href="#">D</a></div></li>
</ul>
</li>
<li><div align="center"><a href="#">老四</a></div>
<ul>
<li><div align="center"><a href="#">A</a></div></li>
<li><div align="center"><a href="#">B</a></div></li>
<li><div align="center"><a href="#">C</a></div></li>
<li><div align="center"><a href="#">D</a></div></li>
</ul>
</li>
<li><div align="center"><a href="#">老五</a></div>
<ul>
<li><div align="center"><a href="#">A</a></div></li>
<li><div align="center"><a href="#">B</a></div></li>
<li><div align="center"><a href="#">C</a></div></li>
<li><div align="center"><a href="#">D</a></div></li>
</ul>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("ul.menu0").superfish();
});
</script>

<div id="Head">
<div id="idPicShow" class="pictures">
<ul id="idNum">
</ul>
</div>
<div id="idPicText"></div>
<div id="idPicList"></div>
</div>

<script>
var rvt = new RevealTrans("idPicShow");
//添加变换对象
rvt.Add('Picture/1.jpg');
rvt.Add('Picture/2.jpg');
rvt.Add('Picture/3.jpg');
var oList = $("idPicList"), oText = $("idPicText"), arrImg = [];
var oNum = $("idNum"), arrNum = [];
//设置图片列表
Each(rvt.List, function(list, i){
//图片式
var img = document.createElement("img");
img.src = list["img"]; img.alt = list["text"];
arrImg[i] = img;
oList.appendChild(img);
//按钮式
var li = document.createElement("li");
li.innerHTML = i + 1;
arrNum[i] = li;
oNum.appendChild(li);
//事件设置
img.onmouseover = li.onmouseover = function(){ rvt.Auto = false; rvt.Index = i; rvt.Start(); };
img.onmouseout = li.onmouseout = function(){ rvt.Auto = true; rvt.Start(); };
});
//设置图片列表样式 文本显示区域
rvt.onShow = function(){
var i = this.Index, list = this.List[i];
//图片式
Each(arrImg, function(o){ o.className = ""; }); arrImg[i].className = "on";
//按钮式
Each(arrNum, function(o){ o.className = ""; }); arrNum[i].className = "on";
}
rvt.Start();
</script>

<div id="PageFrame">
<div id="AuxiliaryFrame">
<br/>
<div id="AuxiliaryFramePosition">
<br/>
<h1 align="center" class="STYLE1">公司资料</h1>
<div id="AuxiliaryFrameContent">
<p align="left">
<span class="STYLE3">
<br/>
XXXXXXXXXXXXXXXXXXXX <br />
XXXXXXXXXXXXXXXXXX<br />
XXXXXXXXXXXXXXXXXX<br />
XXXXXXXXXXXXXXXXXXXX</span></p>
</div>
<div id="AuxiliaryFrameDrawings"><img src="Picture/tianda.png" width="100%"; height="125%" /></div>
</div>
</div>

<div id="MainPageFrame">
<br/>
<div id="MainPageFramePosition">
<div id="MainPageFrameDrawing1"><img src="Picture/BBB.jpg" width="171" height="177"/></div>
<div id="MainPageFrameDrawing2"><img src="Picture/CCC.jpg" width="171" height="179"/></div>
<div id="MainPageFrameContent">
<h1 align="center" class="STYLE2">公司简介</h1>
<blockquote>
<p align="left">
<span class="STYLE3">
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXX
</span></p>
</blockquote>
</div>
</div>
</div>
<br/>
<div id="Bottom">
<br/>
<h2 align="center" class="STYLE6">XXXXXXXXXXXXXXXXXXXXXXXXXX 版权所有</h2>
</div>
</div>
</body>
</html>

[KyKiske22]

图片切换代码: var isIE = (document.all) ? true : false; var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } var Extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } } var Bind = function(object, fun) { return function() { return fun.apply(object, arguments); } } var Each = function(list, fun){ for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); } }; //ie only var RevealTrans = Class.create(); RevealTrans.prototype = { initialize: function(container, options) { this._img = document.createElement("img"); this._a = document.createElement("a"); this._timer = null;//计时器 this.Index = 0;//显示索引 this._onIndex = -1;//当前索引 this.SetOptions(options); this.Auto = !!this.options.Auto; this.Pause = Math.abs(this.options.Pause); this.Duration = Math.abs(this.options.Duration); this.Transition = parseInt(this.options.Transition); this.List = this.options.List; this.onShow = this.options.onShow; //初始化显示区域 this._img.style.visibility = "hidden";//第一次变换时不显示红x图 this._img.style.width = this._img.style.height = "100%"; this._img.style.border = 0; this._img.onmouseover = Bind(this, this.Stop); this._img.onmouseout = Bind(this, this.Start); isIE && (this._img.style.filter = "revealTrans()"); this._a.target = "_blank"; $(container).appendChild(this._a).appendChild(this._img); }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Auto: true,//是否自动切换 Pause: 1000,//停顿时间(微妙) Duration: 1,//变换持续时间(秒) Transition: 23,//变换效果(23为随机) List: [],//数据集合,如果这里不设置可以用Add方法添加 onShow: function(){}//变换时执行 }; Extend(this.options, options || {}); }, Start: function() { clearTimeout(this._timer); //如果没有数据就返回 if(!this.List.length) return; //修正Index if(this.Index < 0 || this.Index >= this.List.length){ this.Index = 0; } //如果当前索引不是显示索引就设置显示 if(this._onIndex != this.Index){ this._onIndex = this.Index; this.Show(this.List[this.Index]); } //如果要自动切换 if(this.Auto){ this._timer = setTimeout(Bind(this, function(){ this.Index++; this.Start(); }), this.Duration * 1000 + this.Pause); } }, //显示 Show: function(list) { if(isIE){ //设置变换参数 with(this._img.filters.revealTrans){ Transition = this.Transition; Duration = this.Duration; apply(); play(); } } this._img.style.visibility = ""; //设置图片属性 this._img.src = list.img; this._img.alt = list.text; //设置链接 !!list["url"] ? (this._a.href = list["url"]) : this._a.removeAttribute("href"); //附加函数 this.onShow(); }, //添加变换对象 Add: function(sIimg, sText, sUrl) { this.List.push({ img: sIimg, text: sText, url: sUrl }); }, //停止 Stop: function() { clearTimeout(this._timer); } };

[KyKiske22]

打错了 楼上的是图片切换的js 子菜单淡出的js ;(function($){ $.fn.superfish = function(op){ var sf = $.fn.superfish, c = sf.c, $arrow = $(['<span class="',c.arrowClass,'"> »</span>'].join('')), over = function(){ var $$ = $(this), menu = getMenu($$); clearTimeout(menu.sfTimer); $$.showSuperfishUl().siblings().hideSuperfishUl(); }, out = function(){ var $$ = $(this), menu = getMenu($$), o = sf.op; clearTimeout(menu.sfTimer); menu.sfTimer=setTimeout(function(){ o.retainPath=($.inArray($$[0],o.$path)>-1); $$.hideSuperfishUl(); if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);} },o.delay); }, getMenu = function($menu){ var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0]; sf.op = sf.o[menu.serial]; return menu; }, addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); }; return this.each(function() { var s = this.serial = sf.o.length; var o = $.extend({},sf.defaults,op); o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){ $(this).addClass([o.hoverClass,c.bcClass].join(' ')) .filter('li:has(ul)').removeClass(o.pathClass); }); sf.o[s] = sf.op = o; $('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() { if (o.autoArrows) addArrow( $('>a:first-child',this) ); }) .not('.'+c.bcClass) .hideSuperfishUl(); var $a = $('a',this); $a.each(function(i){ var $li = $a.eq(i).parents('li'); $a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);}); }); o.onInit.call(this); }).each(function() { var menuClasses = [c.menuClass]; if (sf.op.dropShadows && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass); $(this).addClass(menuClasses.join(' ')); }); }; var sf = $.fn.superfish; sf.o = []; sf.op = {}; sf.IE7fix = function(){ var o = sf.op; if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined) this.toggleClass(sf.c.shadowClass+'-off'); }; sf.c = { bcClass : 'sf-breadcrumb', menuClass : 'sf-js-enabled', anchorClass : 'sf-with-ul', arrowClass : 'sf-sub-indicator', shadowClass : 'sf-shadow' }; sf.defaults = { hoverClass : 'sfHover', pathClass : 'overideThisToUse', pathLevels : 1, delay : 800, animation : {opacity:'show'}, speed : 'normal', autoArrows : true, dropShadows : true, disableHI : false, // true disables hoverIntent detection onInit : function(){}, // callback functions onBeforeShow: function(){}, onShow : function(){}, onHide : function(){} }; $.fn.extend({ hideSuperfishUl : function(){ var o = sf.op, not = (o.retainPath===true) ? o.$path : ''; o.retainPath = false; var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass) .find('>ul').hide().css('visibility','hidden'); o.onHide.call($ul); return this; }, showSuperfishUl : function(){ var o = sf.op, sh = sf.c.shadowClass+'-off', $ul = this.addClass(o.hoverClass) .find('>ul:hidden').css('visibility','visible'); sf.IE7fix.call($ul); o.onBeforeShow.call($ul); $ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); }); return this; } }); })(jQuery);