您的当前位置：首页纯js无flash仿搜狐女人频道FLASH图片切换效果代码_图象特效

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

来源：乌哈旅游

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

<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> 
<head> 
<title>www.gxlcms.com 脚本之家 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/20080130202743347.jpg" /><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20080130202744253.gif" onmouseover="jsf_mmove(0)" /> 
 <img src="https://www.gxlcms.com/Uploads-s/new/2019-09-25-201925/20080130202744477.jpg" /><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20080130202744253.gif" onmouseover="jsf_mmove(1)" /> 
 <img src="https://www.gxlcms.com/Uploads-s/new/2019-09-25-201925/20080130202744721.jpg" /><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20080130202744253.gif" onmouseover="jsf_mmove(2)" /> 
 <img src="https://www.gxlcms.com/Uploads-s/new/2019-09-25-201925/20080130202744468.jpg" /><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20080130202744253.gif" onmouseover="jsf_mmove(3)" /> 
 <img src="https://www.gxlcms.com/Uploads-s/new/2019-09-25-201925/20080130202744674.jpg" /><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-25-201925/20080130202744253.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为右边，也可以增加一个移动方向的参数，具体就懒得写了。
下面再给一个自己写的图片切换效果：

<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> 
<head> 
<title>脚本之家 www.gxlcms.com 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:270px; height:185px; 
 background:#33c; 
} 
#js_F img{ 
 position:absolute; 
 top:0; left:0; 
 width:270px; height:185px; 
} 
</style> 
</head> 
<body> 
 
<script type="text/javascript"> 
\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)<imgList.length){ 
 nextImgID = imgID + 1; 
 } else if (imgID<imgList.length) { 
 nextImgID = 0; 
 } else { 
 imgID = 0; 
 nextImgID = imgID + 1; 
 } 
 imgs[imgID].style.zIndex = 20; 
 imgs[nextImgID].style.zIndex = 15; 
 setTimeout('imgShow()',speed2); 
} 
function imgShow(){ 
 if (tf){ //imgID向左边移动2/3，nextImgID向右边1/3 
 if (parseInt(imgs[imgID].style.left)>-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)<0){ 
 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 { 
 imgs[imgID].style.zIndex = 10; 
 tf = !tf; 
 imgID++; 
 imgChange(); 
 } 
 } 
} 
imgInit(); 
imgChange(); 
/*]]>*///--> 
</ script> 
</body> 
</html>

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