纯js无flash仿搜狐女人频道FLASH图片切换效果代码

前2个星期看到一位朋友说如何用JS实现http://women.sohu.com/这个页中FLASH图片切换效果，这两天有空，做了一个，大家评评：
【加载图片慢点请等会】

www.jb51.net 我们 JS图片切换 ::

* { margin:0; padding:0; }
body {
margin:0;
color:#88c; background:#333;
}
img { margin:0; padding:0; border:0; }
#js_F {
position:relative;
top:10px; left:10px;
overflow:hidden;
width:395px; height:185px;
background:#33c;
}
.div_img {
position:absolute; top:0;
width:295px; height:185px;
cursor:pointer;
}
#div_img_0 { z-index:5; left:0; }
#div_img_1 { z-index:4; left:25px; }
#div_img_2 { z-index:3; left:50px; }
#div_img_3 { z-index:2; left:75px; }
#div_img_4 { z-index:1; left:100px; }

=n; i--) { //当前值+(当前值-初始值)/速度
thisL = parseInt(getStyle(div_imgs[i],"left"));
div_imgs[i].style.left = thisL + Math.ceil(Math.abs(thisL-imgLeft[i])/mo) + "px";
if (i>n) atf[i] = true; //更改图片的位置状态
}
}
thisL = parseInt(getStyle(div_imgs[n],"left"));
if ((atf[n] && thisL>(imgLeft[n]-imgWidth)) || (!atf[n] && thisL=3 && atf[n]) {
atf[n] = false;
sTo = setTimeout(function(){jsf_move(n);}, speed2);
} else if (n==0 && !atf[n]) {
atf[n] = true;
sTo = setTimeout(function(){jsf_move(n);}, speed2);
} else if (atf[n]){
atf[n] = false;
sTo = setTimeout(function(){jsf_move(++n);}, speed2);
} else {
sTo = setTimeout(function(){jsf_move(--n);}, speed2);
}
}
}
//判断图片的位置
function jsf_mmove(n){
clearTimeout(sTo);
switch (n){
case 0 :
atf[0] = false;
jsf_move(0);
break;
case 1 :
case 2 :
case 3 :
if (atf[n-1]) {
sTo = setTimeout(function(){jsf_move(n-1);}, speed1);
} else if (atf[n]) {
atf[n-1] = true;
sTo = setTimeout(function(){jsf_move(n-1);}, speed1);
} else {
sTo = setTimeout(function(){jsf_move(n);}, speed1);
}
break;
case 4 :
atf = [false, false, false, true, true];
jsf_move(3);
break;
}
}
window.onload = function(){
sTo = setTimeout("jsf_move(0)",speed2);
}
function getStyle( elem, name ) {
if (elem.style[name]) { return elem.style[name]; }
else if (elem.currentStyle) { return elem.currentStyle[name]; }
else if (document.defaultView && document.defaultView.getComputedStyle) {
name = name.replace(/([A-Z])/g,"-$1");
name = name.toLowerCase();
var s = document.defaultView.getComputedStyle(elem,"");
return s && s.getPropertyValue(name);
}
else { return null; }
}
/*]]>*///-->

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

这个是有一点问题的，就是鼠标在移动的图片上滑过时，图片会停顿一下，解决方法是增加一个图片位置标记：-1为左边；0为移动中；1为右边，也可以增加一个移动方向的参数，具体就懒得写了。
下面再给一个自己写的图片切换效果：

我们 www.jb51.net JS图片切换 ::

* { margin:0; padding:0; }
body {
margin:0;
color:#88c; background:#333;
}
img { margin:0; padding:0; border:0; }
#js_F {
position:relative;
top:10px; left:10px;
overflow:hidden;
width:270px; height:185px;
background:#33c;
}
#js_F img{
position:absolute;
top:0; left:0;
width:270px; height:185px;
}

\n';
}
js_F.innerHTML = content;
imgs = js_F.getElementsByTagName('img');
imgs[0].style.zIndex = 20;
imgs[1].style.zIndex = 15;
}
function imgChange(){
if ((imgID+1)-180){
imgs[imgID].style.left = (parseInt(imgs[imgID].style.left)-10) + 'px';
imgs[nextImgID].style.left = (parseInt(imgs[nextImgID].style.left)+5) + 'px';
setTimeout('imgShow()',speed1);
} else {
tf = !tf;
imgs[imgID].style.zIndex = 15;
imgs[nextImgID].style.zIndex = 20;
setTimeout('imgShow()',speed1);
}
} else {
if (parseInt(imgs[imgID].style.left)*///-->

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]