我要做一个幻灯，是按照渐变切换的。鼠标移动到切换按钮可以切换，鼠标不移动过去的时候自动按时间切换：
html:
[code]
<div id="focus" >
<ul>
<li><a>img</a></li>
<li>></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
[/code]
js片段:
[code]
var sWidth = sfs("#focus").width(); //获取焦点图的宽度（显示面积）
var len = sfs("#focus ul li").length; //获取焦点图个数
var index = 0;
//以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
var btn = "<div class=’btnBg’></div><div class=’btn’>";
for(var i=0; i < len; i++) {
iv = i+1;
btn += "<span></span>";
}
btn += "</div><div class=’preNext pre’></div><div class=’preNext next’></div>";
sfs("#focus").append(btn);/*
//鼠标移动过去显示：
//1-1渐变切换方法
sfs("#focus .btn span").each(function(index){
sfs(this).mouseover(function(){
sfs("#focus ul li").fadeOut(0).eq(index).fadeIn(500);
sfs("#focus .btn span").removeClass("on").eq(index).addClass("on");
});
});
//1-2左右移动切换方法：
function showPics(index) { //普通切换
var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
sfs("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position
sfs("#focus .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果
//sfs("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //为当前的按钮切换到选中的效果
}
[/code]
主要是另一个自动切换的方法（渐变的）：
js片段：
[code]
function xh(){//切换执行方法
var chdiv=sfs("#footer");
var s=chdiv.data("hds");
if(s == undefined){
s=1;
chdiv.data("hds",s);
}else if(s<4){
s=s+1;
chdiv.data("hds",s);
}else{
s=0;
chdiv.data("hds",s);
};
zdhd(s);
//alert(s);
}
function zdhd(index){ //切换方法
sfs("#focus ul li").fadeOut(500).eq(index).fadeIn(1000);
sfs("#focus .btn span").removeClass("on").eq(index).addClass("on");
}
//这里是最重要的切换执行：
var xhl;
sfs("#focus").hover(function(){
clearInterval(xhl);
},function(){
xhl = setInterval("xh()",4000);
}).trigger("mouseleave");//通过绑定mouseleave执行函数。
[/code]
上面的自动切换方法好傻。特别是切换执行方法那一段。当时没想明白，还用了jquery缓存。
下面是简单的方法（简化了if else那一段。）：
js片段：
[code lang=”js”]
function zdhd(index){ //切换方法
sfs("#focus ul li").fadeOut(500).eq(index).fadeIn(1000);
sfs("#focus .btn span").removeClass("on").eq(index).addClass("on");
}
var xhl;//执行
sfs("#focus").hover(function(){
clearInterval(xhl);
},function(){
xhl = setInterval(function() {
xh(index);
index++;
if(index == len) {index = 0;}
},4000);
}).trigger("mouseleave");//通过绑定mouseleave执行函数。
[/code]
js执行循环用 setInterval(“xh()”,4000);；
详细看代码部分；
js停止执行某循环方法：
clearInterval(xhl);
这里特别提的一个是jquery的mouseleave事件：
与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。请看下面例子的演示。
mouseleave 与 mouseout 的不同
不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
被触发的 Mouseout 事件：
被触发的 Mouseleave 事件：
本文出自 山猫的博客 http://shanmao.me