js实现图片渐变切换效果

爱捉弄你 2010-02-22 10:09:00

js图片切换代码我已经也好啦，现在想两张图片之间的切换有渐变的效果增强用户体验，只要js代码
哪位高手出来指点一下，代码如下：
<!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-Language" content="zh-cn" />
<title>NBA_2009-10赛季_网易体育</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote{padding:0; margin:0;}
li{list-style-type:none;}
img{vertical-align:top;border:0;}
.focusPic{width:250px; margin:0 auto; clear:both; text-align:center; background-color:#58798F; overflow:hidden; color:#FFF}
.focusPic .focusTitle{width:250px; clear:both;}
.focusPic .focusTitle ul { clear:both;}
.focusPic .focusTitle li{ text-align:center; float:left; display:inline; width:21px; padding:2px 0 2px; background-color:#7AA1C0; cursor:pointer; font-size:14px; font-weight:bold; margin:0 2px 8px; overflow:hidden; color:#F00; border:1px solid #7AA1C0;}
.focusPic #focusMenu { width:170px;clear:both; float:right; height:29px; overflow:hidden; background-color:#58798F;}
.focusPic #focusMenu li.current{font-weight:bold; color:#FFF; border:1px solid #FFF;}
.focusPic #focusLeft{width:250px; overflow:hidden; float:left;}
.focusPic #focusLeft li{display:none; float:left;}
.focusPic #focusLeft li.current{display:block;}
.focusPic #focusLeft li img {}
</style>
</head>
<body>
<div class="focusPic">
<ul id="focusLeft">
<li class="current"><a href="#"><img src="http://img4.cache.netease.com/sports/2010/2/21/201002211213570fc6a.jpg" width="250" height="230" /></a><div style="height:50px; overflow:hidden;"><a href="#" style="text-decoration:none; color:#FFF;"><div style="font-weight:bold; font-size:10px; padding-top:3px; padding-bottom:2px;">Hunan Valin Stake In Fortescue Approved</div></a><div id="kv_tent" style="line-height:10px; font-size:9px;">Founded in February 2005, China Universal Asset Management Co., Ltd. (China Universal) is one of the most fast-growing......</div></div></li>
<li ><a href="#"><img src="http://img4.cache.netease.com/sports/2010/2/21/20100221115043b9c2f.jpg" width="250" height="230" /></a><div style="height:50px; overflow:hidden;"><a href="#" style="text-decoration:none; color:#FFF;"><div style="font-weight:bold; font-size:10px; padding-top:3px; padding-bottom:2px;">Hunan Valin Stake In Fortescue Approved</div></a><div id="kv_tent" style="line-height:10px; font-size:9px;">Founded in February 2005, China Universal Asset Management Co., Ltd. (China Universal) is one of the most fast-growing......</div></div></li>
<li ><a href="#"><img src="http://img4.cache.netease.com/sports/2010/2/21/20100221140821e354f.jpg" width="250" height="230" /></a><div style="height:50px; overflow:hidden;"><a href="#" style="text-decoration:none; color:#FFF;"><div style="font-weight:bold; font-size:10px; padding-top:3px; padding-bottom:2px;">Hunan Valin Stake In Fortescue Approved</div></a><div id="kv_tent" style="line-height:10px; font-size:9px;">Founded in February 2005, China Universal Asset Management Co., Ltd. (China Universal) is one of the most fast-growing......</div></div></li>
<li ><a href="#"><img src="http://img4.cache.netease.com/sports/2010/2/20/2010022014384169096.jpg" width="250" height="230" /></a><div style="height:50px; overflow:hidden;"><a href="#" style="text-decoration:none; color:#FFF;"><div style="font-weight:bold; font-size:10px; padding-top:3px; padding-bottom:2px;">Hunan Valin Stake In Fortescue Approved</div></a><div id="kv_tent" style="line-height:10px; font-size:9px;">Founded in February 2005, China Universal Asset Management Co., Ltd. (China Universal) is one of the most fast-growing......</div></div></li>
<li ><a href="#"><img src="http://img3.cache.netease.com/sports/2010/2/20/2010022012145451c0d.jpg" width="250" height="230" /></a><div style="height:50px; overflow:hidden;"><a href="#" style="text-decoration:none; color:#FFF;"><div style="font-weight:bold; font-size:10px; padding-top:3px; padding-bottom:2px;">Hunan Valin Stake In Fortescue Approved</div></a><div id="kv_tent" style="line-height:10px; font-size:9px;">Founded in February 2005, China Universal Asset Management Co., Ltd. (China Universal) is one of the most fast-growing......</div></div></li>
<li ><a href="#"><img src="http://img4.cache.netease.com/sports/2010/2/20/20100220113217d5909.jpg" width="250" height="230" /></a><div style="height:50px; overflow:hidden;"><a href="#" style="text-decoration:none; color:#FFF;"><div style="font-weight:bold; font-size:10px; padding-top:3px; padding-bottom:2px;">Hunan Valin Stake In Fortescue Approved</div></a><div id="kv_tent" style="line-height:10px; font-size:9px;">Founded in February 2005, China Universal Asset Management Co., Ltd. (China Universal) is one of the most fast-growing......</div></div></li>
</ul>
<div class="focusTitle">
<ul id="focusMenu">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<div class="clear"></div>
</div>
<script type="text/javascript">
var $ = function(id) {
return document.getElementById(id);
};
Function.prototype.bind = function() {
if (arguments.length < 2 && arguments[0] == null) {
return this;
}
var __method = this, args = $A(arguments), object = args.shift();
return function() {
return __method.apply(object, args.concat($A(arguments)));
};
};
var isArray = function(testVar) {
return Array == testVar.constructor ? 1 : String != testVar.constructor && null != testVar.length && !testVar.alert && !testVar.nodeType ? 2 : 0;
};
var $A = function(variable) {
switch (isArray(variable)) {
case 1:
return variable;
case 2:
var arr = [], i = -1, len = variable.length;
while (++i < len) {
arr[i] = variable[i];
}
return arr;
default:
return [variable];
}
};
var addClass = function(elem, className) {
if ((" " + elem.className + " ").indexOf(" " + className + " ") == -1) {
if (elem.className == "") {
elem.className = className;
} else {
elem.className += (" " + className);
}
}
};
var removeClass = function(elem, className) {
var newClass = (" " + elem.className + " ").replace(" " + className + " ", " ");
elem.className = newClass.substr(1, newClass.length - 2);
};
var addEvent = function(elem, eventName, handler) {
if (elem.addEventListener) {
elem.addEventListener(eventName, handler, false);
} else if (elem.attachEvent) {
elem.attachEvent("on" + eventName, handler);
}
};
function Slide(menus, contents, css, eventName, interval) {
var curSeq = 0, length = contents.length, timerIds = [], isStopped;
if (menus && length != menus.length) {
throw new Error("the amount of menus and contents is not equal");
}

var hide = function(seq) {
removeClass(contents[seq], css);
if (menus) {
removeClass(menus[seq], css);
}
};

var show = function(seq) {
addClass(contents[seq], css);
if (menus) {
addClass(menus[seq], css);
}
curSeq = seq;
};

this.showNext = function() {
var next = curSeq + 1;
if (next >= length) {
next = 0;
}
var i = length;
while (--i >= 0) {
if (i != next) {
hide(i);
} else {
show(i);
}
}
};

this.change = function(event) {
if (this != menus[curSeq]) {
var i = length;
while (--i >= 0) {
if (menus[i] != this) {
hide(i);
} else {
show(i);
}
}
}
e = window.event || event;
e.cancelBubble = true;
};

this.play = function(speed) {
isStopped = false;
timerIds.push(setInterval(this.showNext.bind(this), speed));
};

this.pause = function() {
isStopped = true;
var i = length;
while (--i >= 0) {
clearInterval(timerIds[i]);
timerIds.splice(i, 1);
}
};

var i = length;
while (--i >= 0) {
addEvent(menus[i], eventName, this.change.bind(menus[i]));
if (interval > 0) {
addEvent(menus[i], "mouseover", this.pause);
addEvent(menus[i], "mouseout", this.play.bind(this, interval));
}
}
if (interval > 0) {
this.play(interval);
}
}

//切换1
var focusImg = new Slide($("focusMenu").getElementsByTagName("li"), $("focusLeft").getElementsByTagName("li"), "current", "mouseover", 8000);
</script>
</body>
</html>

...全文

2763 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

tuwicn 2010-02-22

打赏
举报

这样的效果网上一堆插件，何必自己写这么累

teerhu 2010-02-22

打赏
举报

Sorry,減了一行少刪除了一個var
應為：
var btnLi=$('#focusMenu>li'),divLi=$('#focusLeft>li');

ganzhongliang 2010-02-22

打赏
举报

引用 4 楼 teerhu 的回复:

JScript code<script src="jquery-1.3.2.min.js"></script><script>
$(function(){var btnLi=$('#focusMenu>li'),var divLi=$('#focusLeft>li');

btnLi.mouseover(function(){var index=btnLi.index(this);$(this).?-

teerhu 2010-02-22

打赏
举报



<script src="jquery-1.3.2.min.js"></script> 

<script>

$(function(){

var btnLi=$('#focusMenu>li'),var divLi=$('#focusLeft>li');



btnLi.mouseover(function(){var index=btnLi.index(this);$(this).addClass("current").siblings



().removeClass("current");divLi.eq(index).siblings().hide().end().fadeIn('slow');});



});



</script>