本文汇总了包括淘宝网4种JS幻灯焦点图、经典图片切换、从两侧向中间拼合的效果以及百度的图片切换特效在内的五种图片切换方案，详细介绍了每一种效果的实现方法。
（1）淘宝网4种JS图片切换幻灯焦点图代码
<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>焦点图</title><style type="text/css"> body {margin:0px;padding:0px;background:url(/jscss/demoimg/201109/bg.jpg);}ul, li {margin:0px;padding:0px;float:left;list-style-type:none;}.frame {width:1010px;height:auto;overflow:hidden;margin:40px auto 0 auto;}.box {width:490px;height:170px;padding:1px;float:left;display:inline;margin:5px;background:#fff;position:relative;border:1px solid #dedede;}.list {width:490px;height:170px;float:left;overflow:hidden; position:relative;}.list ul {position:absolute;top:0px;left:0px;}.list li {width:490px;height:170px;float:left;}.list li.opacity {position:absolute;top:0px;left:0px;opacity:0;filter:alpha(opacity:0)}.but {width:105px;height:16px;right:1px;bottom:5px;position:absolute;z-index:1;}.but li {width:14px;height:14px;float:left;color:#fff;font-size:10px;text-align:center;line-height:14px;font-family:Verdana;background:#bbb;display:inline;margin:0 5px 0 0;cursor:pointer;border:1px solid #a9abaa;}.but li.hove {background:#ff902a;border:1px solid #ff6502;}</style><script type="text/javascript">function $(id){ return typeof id === "string" ? document.getElementById(id) : id;}function $$(oParent, elem){ return (oParent || document).getElementsByTagName(elem);}function $$$(oParent, sClass){ var aElem = $$(oParent, '*'); var aClass = []; var i = 0; for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]); return aClass;}function Slide(){ this.initialize.apply(this, arguments);}Object.extend = function(destination, source){ for (var property in source) { destination[property] = source[property]; } return destination;};Slide.prototype = { initialize : function(obj, list, but, hove, onEnd){ if($(obj)){ this.obj = $(obj); this.oList = $$$(this.obj, list)[0]; this.oUl = $$(this.oList, 'ul')[0]; this.aList = $$(this.oList, 'li'); this.aListH = this.aList[0].offsetHeight; this.aListW = this.aList[0].offsetWidth; this.oBut = $$$(this.obj, but)[0]; this.aBut = $$(this.oBut, 'li'); this.oEve(onEnd); this.oAction = this.onEnd.action; this.onEnd.method == 'mouseover' ? this.method = "mouseover" : this.method = "click"; this.onEnd.autoplay == 'stop' ? this.autoplay = "stop" : this.autoplay = "play"; if(this.oAction == 'top'){ this.oUl.style.height = this.aListH * this.aList.length +'px'; }else if(this.oAction == 'left'){ this.oUl.style.width = this.aListW * this.aList.length +'px'; }else if(this.oAction == 'opacity'){ this.oUl.style.height = this.aListH +'px'; var i = 0; for(i=0;i<this.aList.length;i++){ this.aList[i].style.position = 'absolute'; this.aList[i].className = 'opacity'; } this.aList[0].className = ''; }else{ this.oUl.style.height = this.aListH * this.aList.length +'px'; } this.getEvent(hove); } }, oEve: function(onEnd){ this.onEnd = { method : 'click', autoplay: 'stop' }; Object.extend(this.onEnd, onEnd || {}); }, addEvent : function(oElm, strEvent, fuc) { window.addEventListener ? oElm.addEventListener(strEvent, fuc, false) : oElm.attachEvent('on' + strEvent, fuc); }, getEvent : function(hove) { var _this = this; var i = iNow = 0; for(i=0;i<this.aBut.length;i++){ (function(){ var j = i; _this.addEvent(_this.aBut[j], _this.method, function(){ _this.fnClick(j, hove); _this.autoPlayTab(j, hove); }); })(); } this.autoPlayTab(i, hove); }, autoPlayTab : function(iNow, hove){ if(this.autoplay == 'play'){ var _this = this; this.iNow = iNow; this.obj.onmouseover = function(){ clearInterval(_this.timer); }; this.obj.onmouseout = function(){ clearInterval(_this.timer); _this.timer = setInterval(playTab,3000); }; clearInterval(_this.timer); _this.timer = setInterval(playTab,3000); function playTab(){ if(_this.iNow == _this.aBut.length)_this.iNow = 0; _this.fnClick(_this.iNow, hove); _this.iNow++; } } }, fnClick : function(oBut, hove){ var i = 0; for(i=0;i<this.aBut.length;i++)this.aBut[i].className = ''; this.aBut[oBut].className = hove; if(this.oAction == 'top'){ this.sMove(this.oUl, {top:-(this.aListH * oBut)}); }else if(this.oAction == 'left'){ this.sMove(this.oUl, {left:-(this.aListW * oBut)}); }else if(this.oAction == 'opacity'){ var i = 0; for(i=0;i<this.aList.length;i++){ this.sMove(this.aList[i], {opacity:0}); } this.sMove(this.aList[oBut], {opacity:100}); }else{ this.sMove(this.oUl, {top:-(this.aListH * oBut)}); } }, getStyle : function(obj, attr) { return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj, false)[attr]; }, sMove : function(obj, json, onEnd){ var _this = this; clearInterval(obj.timer); obj.timer = setInterval(function(){ _this.dMove(obj, json, onEnd); },30); }, dMove : function(obj, json, onEnd){ this.attr = ''; this.bStop = true; for(this.attr in json){ this.iCur = 0; this.attr == 'opacity' ? this.iCur = parseInt(parseFloat(this.getStyle(obj, this.attr))*100) : this.iCur = parseInt(this.getStyle(obj, this.attr)); this.iSpeed = (json[this.attr] - this.iCur) / 7; this.iSpeed = this.iSpeed > 0 ? Math.ceil(this.iSpeed) : Math.floor(this.iSpeed); if(json[this.attr] != this.iCur)this.bStop = false; if(this.attr == 'opacity'){ obj.style.filter = 'alpha(opacity:' + (this.iCur + this.iSpeed) +')'; obj.style.opacity = (this.iCur + this.iSpeed ) / 100; }else{ obj.style[this.attr] = this.iCur + this.iSpeed + 'px'; } } if(this.bStop){ clearInterval(obj.timer); if(onEnd)onEnd(); } }};</script><script type="text/javascript"> window.onload = function(){ new Slide('box', 'list', 'but', 'hove', {action : 'opacity'}); new Slide('box1', 'list', 'but', 'hove', {method : 'mouseover', action : 'top', autoplay : 'play'}); new Slide('box2', 'list', 'but', 'hove', {action : 'left', autoplay : 'play'}); new Slide('box3', 'list', 'but', 'hove', {action : 'opacity', autoplay : 'play'});};</script></head> <body><div class="frame"> <div class="box" id="box"> <div class="list"> <ul> <li><img src="/jscss/demoimg/201109/01.png" /></li> <li><img src="/jscss/demoimg/201109/02.jpg" /></li> <li><img src="/jscss/demoimg/201109/03.jpg" /></li> <li><img src="/jscss/demoimg/201109/04.jpg" /></li> <li><img src="/jscss/demoimg/201109/05.jpg" /></li> </ul> </div> <div> <div class="but"> <ul> <li class="hove">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </div> </div> <div class="box" id="box1"> <div class="list"> <ul> <li><img src="/jscss/demoimg/201109/01.png" /></li> <li><img src="/jscss/demoimg/201109/02.jpg" /></li> <li><img src="/jscss/demoimg/201109/03.jpg" /></li> <li><img src="/jscss/demoimg/201109/04.jpg" /></li> <li><img src="/jscss/demoimg/201109/05.jpg" /></li> </ul> </div> <div> <div class="but"> <ul> <li class="hove">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </div> </div> <div class="box" id="box2"> <div class="list"> <ul> <li><img src="/jscss/demoimg/201109/01.png" /></li> <li><img src="/jscss/demoimg/201109/02.jpg" /></li> <li><img src="/jscss/demoimg/201109/03.jpg" /></li> <li><img src="/jscss/demoimg/201109/04.jpg" /></li> <li><img src="/jscss/demoimg/201109/05.jpg" /></li> </ul> </div> <div> <div class="but"> <ul> <li class="hove">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </div> </div> <div class="box" id="box3"> <div class="list"> <ul> <li><img src="/jscss/demoimg/201109/01.png" /></li> <li><img src="/jscss/demoimg/201109/02.jpg" /></li> <li><img src="/jscss/demoimg/201109/03.jpg" /></li> <li><img src="/jscss/demoimg/201109/04.jpg" /></li> <li><img src="/jscss/demoimg/201109/05.jpg" /></li> </ul> </div> <div> <div class="but"> <ul> <li class="hove">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </div> </div></div></body></html>来源： 点击打开链接
（2）经典图片切换
<!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"><head><title>经典的图片幻灯</title><style type="text/css">.d1{width:443px;height:auto;overflow:hidden;border:#666666 2px solid;background-color:#000000;position:relative;}.loading{width:443px;border:#666666 2px solid;background-color:#000000;color:#FFCC00;font-size:12px;height:179px;text-align:center;padding-top:30px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight:bold;}.d2{width:100%;height:209px;overflow:hidden;}.num_list{position:absolute;width:100%;left:0px;bottom:-1px;background-color:#000000;color:#FFFFFF;font-size:12px;padding:4px 0px;height:20px;overflow:hidden;}.num_list span{display:inline-block;height:16px;padding-left:6px;}img{border:0px;}ul{display:none;}.button{position:absolute; z-index:1000; right:0px; bottom:2px; font-size:13px; font-weight:bold; font-family:Arial, Helvetica, sans-serif;}.b1,.b2{background-color:#666666;display:block;float:left;padding:2px 6px;margin-right:3px;color:#FFFFFF;text-decoration:none;cursor:pointer;}.b2{color:#FFCC33;background-color:#FF6633;}</style><script language="javascript" type="text/javascript">var s=function(){var interv=2000; //切换间隔时间var interv2=10; //切换速速var opac1=80; //文字背景的透明度var source="fade_focus" //图片容器id//获取对象function getTag(tag,obj){if(obj==null){return document.getElementsByTagName(tag)}else{return obj.getElementsByTagName(tag)}}function getid(id){return document.getElementById(id)};var opac=0,j=0,t=63,num,scton=0,timer,timer2,timer3;var id=getid(source);id.removeChild(getTag("div",id)[0]);var li=getTag("li",id);var div=document.createElement("div");var title=document.createElement("div");var span=document.createElement("span");var button=document.createElement("div");button.className="button";for(var i=0;i<li.length;i++){var a=document.createElement("a");a.innerHTML=i+1;a.onclick=function(){clearTimeout(timer);clearTimeout(timer2);clearTimeout(timer3);j=parseInt(this.innerHTML)-1;scton=0;t=63;opac=0;fadeon();};a.className="b1";a.onmouseover=function(){this.className="b2"};a.onmouseout=function(){this.className="b1";sc(j)};button.appendChild(a);}//控制透明度function alpha(obj,n){if(document.all){obj.style.filter="alpha(opacity="+n+")";}else{obj.style.opacity=(n/100);}}//控制焦点按钮function sc(n){for(var i=0;i<li.length;i++){button.childNodes[i].className="b1"};button.childNodes[n].className="b2";}title.className="num_list";title.appendChild(span);alpha(title,opac1);id.className="d1";div.className="d2";id.appendChild(div);id.appendChild(title);id.appendChild(button);//渐显var fadeon=function(){opac+=5;div.innerHTML=li[j].innerHTML;span.innerHTML=getTag("img",li[j])[0].alt;alpha(div,opac);if(scton==0){sc(j);num=-2;scrolltxt();scton=1};if(opac<100){timer=setTimeout(fadeon,interv2)}else{timer2=setTimeout(fadeout,interv);};}//渐隐var fadeout=function(){opac-=5;div.innerHTML=li[j].innerHTML;alpha(div,opac);if(scton==0){num=2;scrolltxt();scton=1};if(opac>0){timer=setTimeout(fadeout,interv2)}else{if(j<li.length-1){j++}else{j=0};fadeon()};}//滚动文字var scrolltxt=function(){t+=num;span.style.marginTop=t+"px";if(num<0&&t>3){timer3=setTimeout(scrolltxt,interv2)}else if(num>0&&t<62){timer3=setTimeout(scrolltxt,interv2)}else{scton=0}};fadeon();}//初始化window.s;</script></head><body><div id="fade_focus"> <div class="loading">Loading...<br /><img src="/jscss/demoimg/loading.gif"></div> <ul> <li><img src="/jscss/demoimg/wall5.jpg" width="443" height="209" alt="图片焦点切换第一张文字" /></li> <li><img src="/jscss/demoimg/wall6.jpg" width="443" height="209" alt="图片焦点切换第二张文字" /></li> <li><img src="/jscss/demoimg/wall7.jpg" width="443" height="209" alt="图片焦点切换第三张文字" /></li> <li><img src="/jscss/demoimg/wall8.jpg" width="443" height="209" alt="图片焦点切换第四张文字" /></li> </ul></div></body></html> 来源： 点击打开链接
（3）从两侧向中间拼合的JavaScript图片切换效果
<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>从两侧向中间拼合的JavaScript图片切换效果</title><style type="text/css">.d1{width:444px;height:auto;overflow:hidden;border:#666666 2px solid;background-color:#000000;position:relative;}.left{width:222px;height:209px;overflow:hidden;position:absolute;z-index:500;top:0px;left:-222px;}.right{width:222px;height:209px;overflow:hidden;position:absolute;z-index:503;background-position:right top;background-repeat:no-repeat;right:-222px;top:0px;}.loading{width:444px;border:#666666 2px solid;background-color:#000000;color:#FFCC00;font-size:12px;height:179px;text-align:center;padding-top:30px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight:bold;}.d2{width:100%;height:209px;overflow:hidden;}.num_list{position:absolute;width:100%;left:0px;bottom:-1px;background-color:#000000;color:#FFFFFF;font-size:12px;padding:4px 0px;height:20px;overflow:hidden;z-index:1000;}.num_list span{display:inline-block;height:16px;padding-left:6px;}img{border:0px;}ul{display:none;}.button{position:absolute; z-index:1003; right:0px; bottom:2px; font-size:13px; font-weight:bold; font-family:Arial, Helvetica, sans-serif;}.b1,.b2{background-color:#666666;display:block;float:left;padding:2px 6px;margin-right:3px;color:#FFFFFF;text-decoration:none;cursor:pointer;}.b2{color:#FFCC33;background-color:#FF6633;}</style><script language="javascript" type="text/javascript">var s=function(){var interv=2000; //切换时间var interv2=10; //速速var opac1=80; //文字背景透明度var source="fade_focus" //焦点轮换容器idfunction getTag(tag,obj){if(obj==null){return document.getElementsByTagName(tag)}else{return obj.getElementsByTagName(tag)}}function getid(id){return document.getElementById(id)};var opac=0,j=0,t=63,num=-2,scton=0,timer,timer2,timer3;var id=getid(source);id.removeChild(getTag("div",id)[0]);var li=getTag("li",id);var div=document.createElement("div");var title=document.createElement("div");var span=document.createElement("span");var button=document.createElement("div");var left=document.createElement("div");var right=document.createElement("div");button.className="button";for(var i=0;i<li.length;i++){var a=document.createElement("a");a.innerHTML=i+1;a.onclick=function(){clearTimeout(timer);clearTimeout(timer2);clearTimeout(timer3);j=parseInt(this.innerHTML)-2;t=63;slide();};a.className="b1";a.onmouseover=function(){this.className="b2"};a.onmouseout=function(){this.className="b1";sc(j)};button.appendChild(a);}//控制透明度function alpha(obj,n){if(document.all){obj.style.filter="alpha(opacity="+n+")";}else{obj.style.opacity=(n/100);}}//控制焦点按钮function sc(n){for(var i=0;i<li.length;i++){button.childNodes[i].className="b1"};button.childNodes[n].className="b2";}title.className="num_list";title.appendChild(span);alpha(title,opac1);id.className="d1";div.className="d2";left.className="left";right.className="right";id.appendChild(div);id.appendChild(left);id.appendChild(right);id.appendChild(title);id.appendChild(button);//滑动图片var slide=function(){ var im=-222; var k=21; if(j<li.length-1){j++}else{j=0}; change_dis(1); sc(j); left.style.backgroundImage="url("+getTag("img",li[j])[0].src+")"; right.style.backgroundImage="url("+getTag("img",li[j])[0].src+")"; function run(){ if(k>1){k--}; im+=k; if(im>0){im=0}; left.style.left=String(im)+"px"; right.style.right=String(im)+"px"; if(im<0){timer=setTimeout(run,interv2)}else{span.innerHTML=getTag("img",li[j])[0].alt;scrolltxt();change_dis();timer2=setTimeout(slide,interv)} } run();}var change_dis=function(n){if(n>0){left.style.display="block";right.style.display="block";}else{left.style.display="none";right.style.display="none";div.innerHTML=li[j].innerHTML;}}var scrolltxt=function(){t+=num;span.style.marginTop=t+"px";if(num<0&&t>3){timer3=setTimeout(scrolltxt,interv2)}else{t=63}};slide();}//初始化window.s;</script></head><body><div id="fade_focus"> <div class="loading">Loading...<br /><img src="/jscss/demoimg/loading.gif" /></div> <ul> <li><img src="/jscss/demoimg/wall1.jpg" alt="图片1的说明" /></li> <li><img src="/jscss/demoimg/wall2.jpg" alt="图片2的说明" /></li> <li><img src="/jscss/demoimg/wall3.jpg" alt="图片3的说明" /></li> <li><img src="/jscss/demoimg/wall4.jpg" alt="图片4的说明" /></li> </ul></div></body></html> 来源： 点击打开链接
（4）来自百度的图片切换特效
<html><head><title>来自百度的图片切换特效</title></head><body><script>var links = new Array();links[1] = "#";links[2] = "#";links[3] = "#";links[4] = "#";var imgs = new Array();for(var n = 1; n <= 5; n++) imgs[n] = new Image();imgs[1].src = "/jscss/demoimg/200902/tongji550.gif";imgs[2].src = "/jscss/demoimg/200902/banner071031.jpg";imgs[3].src = "/jscss/demoimg/200902/dataunion0711.jpg";imgs[4].src = "/jscss/demoimg/200902/umaz13_550.jpg";var tits = new Array();tits[1] ="百度统计";tits[2] = "联盟杯摄影师大赛";tits[3] = "百度行业报告";tits[4] = "联盟志";var imgwidth = 550;//图片宽度var imgheight = 134;//图片高度var str = "<style type='text/css'>";str += "#imgnv{display:none;position:absolute;bottom:-1px;right:0;height:16px;}#imgnv div{float:left;margin-right:1px;}";str += "#imgnv div.on,#imgnv div.off{margin-bottom:1px;width:30px;height:15px;line-height:18px!important;line-height:15px;font-size:9px;text-align:center;cursor:pointer;cursor:hand}";str += "#imgnv div.on{background:#CE0609;color:#FFF;font-weight:bold}";str += "#imgnv div.off{background:#323232;color:#FFF;text-decoration:none}";str += "#titnv{margin-top:3px;color:#000;text-align:center;display:none;}";str += "</style>";str += "<div style='position:relative'>";str += "<div><a id='dlink' href='" + links[1] + "' target='_blank'><img id='dimg' src='" + imgs[1].src + "' border='0' width='" + imgwidth + "' height='"+imgheight+"' style='filter:Alpha(opacity=100)' onmouseover='Pause(true)' onmouseout='Pause(false)'></a></div>";//修改点1：循环添加内层div内容以增加个数str += "<div id='imgnv'><div id='it1' class='on' onmouseover='ImgSwitch(1, true)' onmouseout='Pause(false)'>1</div><div id='it2' class='off' onmouseover='ImgSwitch(2, true)' onmouseout='Pause(false)'>2</div><div id='it3' class='on' onmouseover='ImgSwitch(3, true)' onmouseout='Pause(false)'>3</div><div id='it4' class='off' onmouseover='ImgSwitch(4, true)' onmouseout='Pause(false)'>4</div></div>";str += "<div id='titnv'><b>" + tits[1] + "</b></div>";str += "</div>";document.write(str);var oi = document.getElementById("dimg");var pause = false;var curid = 1;var lastid = 1;var sw = 1;var opacity = 100;var speed = 15;var delay = (document.all)? 400:700;function SetAlpha(){if(document.all){if(oi.filters && oi.filters.Alpha) oi.filters.Alpha.opacity = opacity;}else{oi.style.MozOpacity = ((opacity >= 100)? 99:opacity) / 100;}}function ImgSwitch(id, p){if(p){pause = true;opacity = 100;SetAlpha();}oi.src = imgs[id].src;document.getElementById("dlink").href = links[id];document.getElementById("it" + lastid).className = "off";document.getElementById("it" + id).className = "on";document.getElementById("titnv").innerHTML = "<b>" + tits[id] + "</b>";curid = lastid = id;}function ScrollImg(){if(pause && opacity >= 100) return;if(sw == 0){opacity += 2;if(opacity > delay){ opacity = 100; sw = 1; }}if(sw == 1){opacity -= 3;if(opacity < 10){ opacity = 10; sw = 3; }}SetAlpha();if(sw != 3) return;sw = 0;curid++;//修改点2：这里的4也是个数if(curid > 4) curid = 1;ImgSwitch(curid, false);}function Pause(s){pause = s;}function StartScroll(){setInterval(ScrollImg, speed);}function CheckLoad(){if (imgs[1].complete == true && imgs[2].complete == true) {clearInterval(checkid);setTimeout(StartScroll, 2000);}}var checkid = setInterval(CheckLoad, 10);</script></body></html>来源： 点击打开链接
（5）图片切换效果
<!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><title>搜狐女人频道首页的JS图片切换效果</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><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><div id="js_F"> <div id="div_img_0" class="div_img"><a href="#"><img src="/jscss/demoimg/200901/01.jpg" /></a><img src="/jscss/demoimg/200901/bg_showimg.gif" onmouseover="jsf_mmove(0)" /></div> <div id="div_img_1" class="div_img"><a href="#"><img src="/jscss/demoimg/200901/02.jpg" /></a><img src="/jscss/demoimg/200901/bg_showimg.gif" onmouseover="jsf_mmove(1)" /></div> <div id="div_img_2" class="div_img"><a href="#"><img src="/jscss/demoimg/200901/03.jpg" /></a><img src="/jscss/demoimg/200901/bg_showimg.gif" onmouseover="jsf_mmove(2)" /></div> <div id="div_img_3" class="div_img"><a href="#"><img src="/jscss/demoimg/200901/04.jpg" /></a><img src="/jscss/demoimg/200901/bg_showimg.gif" onmouseover="jsf_mmove(3)" /></div> <div id="div_img_4" class="div_img"><a href="#"><img src="/jscss/demoimg/200901/05.jpg" /></a><img src="/jscss/demoimg/200901/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; //更改图片的位置状态 } } 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再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.youkuaiyun.com/jiangjunshow
扫一扫
918
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
