类似flash图片自动切换效果，鼠标经过缩略图，立即切换。
<!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" lang="gb2312"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" /> <meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" /> <title>JS图片切换,sky整理收集。</title> <meta name="generator" content="editplus" /> <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> <a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr> <!--欢迎来到站长特效网，我们网站收集大量高质量js特效，提供许多广告代码下载，网址：www.zzjs.net，zzjs@msn.com,用.net打造靓站--> <script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script> <div id="js_F"> <div id="div_img_0" class="div_img"><a href="http://zzjs.net"><img src="/img/01.jpg" /></a><img src="/img/bg_showimg.gif" onmouseover="jsf_mmove(0)" /></div> <div id="div_img_1" class="div_img"><a href="http://www.zzjs.net"><img src="/img/02.jpg" /></a><img src="/img/bg_showimg.gif" onmouseover="jsf_mmove(1)" /></div> <div id="div_img_2" class="div_img"><a href="http://zzjs.net"><img src="/img/03.jpg" /></a><img src="/img/bg_showimg.gif" onmouseover="jsf_mmove(2)" /></div> <div id="div_img_3" class="div_img"><a href="http://www.zzjs.net"><img src="/img/04.jpg" /></a><img src="/img/bg_showimg.gif" onmouseover="jsf_mmove(3)" /></div> <div id="div_img_4" class="div_img"><a href="http://zzjs.net"><img src="/img/05.jpg" /></a><img src="/img/bg_showimg.gif" onmouseover="jsf_mmove(4)" /></div> </div> <script type="text/javascript"> <!--///*--><![CDATA[/*><!--*/ var div_imgs = document.getElementById("js_F").getElementsByTagName("div"); var imgLeft = [0, 25, 50, 75, 100]; //5个图片的初始left值 var imgWidth = 270; //图片的宽度 var atf = [true, true, true, true, true]; //5个图片的位置：true为右边，false为左边 var speed1 = 10, speed2 = 2000, mo = 15; //速度 var sTo; function jsf_move(n){ clearTimeout(sTo); var thisL; //图片left值 if (atf[n]) { //要移动的图片在右边 //需移动的图片（包括该图片左边的所有图片）向左边移动) for (var i=0; i<=n; i++) { //当前值-(图片宽度-(当前值-初始值))/速度 thisL = parseInt(getStyle(div_imgs[i],"left")); div_imgs[i].style.left = thisL - Math.ceil((imgWidth-(imgLeft[i]-thisL))/mo) + "px"; if (i<n) atf[i] = false; //更改图片的位置状态 }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。 } else { //要移动的图片在左边 //需移动的图片（包括该图片右边的所有图片）向右边移动) for (var i=4; i>=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); } } }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。 //判断图片的位置 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); }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。 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>
提示：你可以先修改部分代码再运行。
标签:
金泉涞饮水机,商务饮水机,节能饮水机,学校饮水机,ic卡饮水机, 饮水机厂家,加盟饮水机行业,首选金泉涞！
姓名
邮件
验证 (10+0)
网址 (可选)
