仿搜狐女人频道FLASH图片切换效果_图象特效

来源：汇意旅游网

<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> 
<head> 
<title>JS图片切换 ::</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta name="generator" content="editplus" /> 
<meta name="author" content="eLore" /> 
<meta name="keywords" content="" /> 
<meta name="description" content="" /> 
<style type="text/css"> 
* { 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; } 
</style> 
</head> 
<body> 
 
<img src="https://www.gxlcms.com/Uploads-s/new/2019-09-25-201925/01.jpg" /><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/bg_showimg.gif" onmouseover="jsf_mmove(0)" /> 
<img src="https://www.gxlcms.com/Uploads-s/new/2019-09-25-201925/02.jpg" /><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/bg_showimg.gif" onmouseover="jsf_mmove(1)" /> 
<img src="https://www.gxlcms.com/Uploads-s/new/2019-09-25-201925/03.jpg" /><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/bg_showimg.gif" onmouseover="jsf_mmove(2)" /> 
<img src="https://www.gxlcms.com/Uploads-s/new/2019-09-25-201925/04.jpg" /><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/bg_showimg.gif" onmouseover="jsf_mmove(3)" /> 
<img src="https://www.gxlcms.com/Uploads-s/new/2019-09-25-201925/05.jpg" /><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/bg_showimg.gif" onmouseover="jsf_mmove(4)" /> 
 
<script type="text/javascript"> 
=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<imgLeft[n])) { 
//当前图片移动未结束，继续移动当前图片 
sTo = setTimeout(function(){jsf_move(n);}, speed1); 
} else { 
//当前图片移动结束，准备移动下一张图片 
if (n>=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; } 
} 
/*]]>*///--> 
</ script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
这个是有一点问题的，就是鼠标在移动的图片上滑过时，图片会停顿一下，解决方法是增加一个图片位置标记：-1为左边；0为移动中；1为右边，也可以增加一个移动方向的参数，具体就懒得写了。下面再给一个自己写的图片切换效果：

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