JS实现的幻灯片切换显示效果

本文实例讲述了JS实现的幻灯片切换显示效果。分享给大家供大家参考，具体如下：
html：

<！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>纯JS幻灯版</title><style type="text/css">*{ margin:0; padding:0;}#banner {width:1000px;text-align:left; background:#fff; margin:0 auto;}#banner img{ display:block; float:left;}.mainbox{ overflow:hidden; position:relative;}.flashbox{ overflow:hidden; position:relative;}.imagebox{ text-align:right;position:relative;z-index:999;}.bitdiv{display:inline-block;width:18px;height:18px;margin:0 10px 10px 0px;cursor:pointer;float:right;}.defimg{ background:url（styles/images/ppt_icon2.png）;}.curimg{background:url（styles/images/ppt_icon1.png）;}</style><script type="text/javascript" src="styles/js/ppt_ban.js"></script></head><body><div id="banner"><script> var box =new PPTBox（）; box.width = 1000; //宽度 box.height = 226;//高度 box.autoplayer = 3;//自动播放间隔时间 //box.add（{"url":"图片地址","title":"悬浮标题","href":"链接地址"}） box.add（{"url":"styles/images/fck_04.jpg","href":"###","title":"悬浮提示标题1"}）; box.add（{"url":"styles/images/fck_04.jpg","href":"###","title":"悬浮提示标题1"}）; box.add（{"url":"styles/images/fck_04.jpg","href":"###","title":"悬浮提示标题1"}）; box.add（{"url":"styles/images/fck_04.jpg","href":"###","title":"悬浮提示标题1"}）; box.show（）;</script></div></body></html>

js：

function PPTBox（）{this.uid = PPTBoxHelper.getId（）;PPTBoxHelper.instance[this.uid] = this;this._$ = function（id）{return document.getElementById（id）;};this.width = 400;//宽度this.height = 300;//高度this.picWidth = 15;//小图宽度this.picHeight = 12;//小图高度this.autoplayer = 4;//自动播放间隔（秒）this.target = "_blank";this._box = [];this._curIndex = 0;}PPTBox.prototype ={_createMainBox : function （）{var flashBoxWidth = this.width * this._box.length;var html="<div id=""+this.uid+"_mainbox" class="mainbox" style="width:"+（this.width）+"px;height:"+（this.height）+"px;">";html += "<div id=""+this.uid+"_flashbox" class="flashbox" style="width:"+flashBoxWidth+"px;height:"+（this.height）+"px;"></div>";html += "<div id=""+this.uid+"_imagebox" class="imagebox" style="width:"+this.width+"px;height:"+（this.picHeight）+"px;top:-"+（this.picHeight+20）+"px;"></div>";html += "</div>";document.write（html）;},_init : function （）{var picstyle= "";var eventstr = "PPTBoxHelper.instance[""+this.uid+""]";var imageHTML="";var flashbox = "";for（var i=0;i<this._box.length;i++）{var parame = this._box[i];flashbox += this.flashHTML（parame.url,this.width,this.height,i）;imageHTML ="<div class="bitdiv "+（（i==0）?"curimg":"defimg"）+"" title ="+parame.title+" src="bit01.gif" "+picstyle+" onclick = ""+eventstr+".clickPic（"+i+"）" onmouseover=""+eventstr+".mouseoverPic（"+i+"）"></div>" + imageHTML;}this._$（this.uid+"_flashbox"）.innerHTML = flashbox;this._$（this.uid+"_imagebox"）.innerHTML = imageHTML;},_play : function（）{clearInterval（this._autoplay）;var idx = this._curIndex+1;if（idx>=this._box.length）{idx=0;}this.changeIndex（idx）;var eventstr = "PPTBoxHelper.instance[""+this.uid+""]._play（）";this._autoplay = setInterval（eventstr,this.autoplayer*1000）;},flashHTML : function（url,width,height,idx） {var isFlash = url.substring（url.lastIndexOf（"."）+1）.toLowerCase（）=="swf";var html = "";if（isFlash）{html = "<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" "+ "codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width=""+width+"" height=""+height+"">"+ "<param name="movie" value=""+url+"" />"+ "<param name="quality" value="high" />"+ "<param name="wmode" value="transparent">"+ "<embed src=""+url+"" quality="high" wmode="opaque" pluginspage="http://www.macromedia.com/go/getflashplayer""+" type="application/x-shockwave-flash" width="+width+" height=""+height+""></embed>"+" </object>";} else {var eventstr = "PPTBoxHelper.instance[""+this.uid+""]";var style = "";if（this._box[idx].href）{style = "cursor:pointer"}html="<img src=""+url+"" style="width:"+width+"px;height:"+height+"px;"+style+"" onclick = ""+eventstr+".clickPic（"+idx+"）"/>";}return html;},changeIndex : function（idx）{var parame = this._box[idx];moveElement（this.uid+"_flashbox",-（idx*this.width）,1）;var imgs = this._$（this.uid+"_imagebox"）.getElementsByTagName（"div"）;imgs[this._box.length-1-this._curIndex].className = "bitdiv defimg";imgs[this._box.length-1-idx].className = "bitdiv curimg";this._curIndex = idx;},mouseoverPic:function（idx）{this.changeIndex（idx）;if（this.autoplayer>0）{clearInterval（this._autoplay）;var eventstr = "PPTBoxHelper.instance[""+this.uid+""]._play（）";this._autoplay = setInterval（eventstr,this.autoplayer*1000）;}},clickPic:function（idx）{var parame = this._box[idx];if（parame.href&¶me.href！=""）{window.open（parame.href,this.target）;}},add:function （imgParam）{this._box[this._box.length] = imgParam;},show : function （） {this._createMainBox（）;this._init（）;if（this.autoplayer>0）{var eventstr = "PPTBoxHelper.instance[""+this.uid+""]._play（）";this._autoplay = setInterval（eventstr,this.autoplayer*1000）;}}}var PPTBoxHelper ={count: 0,instance: {},getId: function（） { return "_ppt_box-" + （this.count++）; }};function moveElement（elementID,final_x,interval） { if （！document.getElementById） return false; if （！document.getElementById（elementID）） return false; var elem = document.getElementById（elementID）; if （elem.movement） {clearTimeout（elem.movement）; } if （！elem.style.left） {elem.style.left = "0px"; } var xpos = parseInt（elem.style.left）; if （xpos == final_x ） {return true; } if （xpos < final_x） {var dist = Math.ceil（（final_x - xpos）/5）;xpos = xpos + dist; } if （xpos > final_x） {var dist = Math.ceil（（xpos - final_x）/5）;xpos = xpos - dist; } elem.style.left = xpos + "px"; var repeat = "moveElement（""+elementID+"","+final_x+","+interval+"）"; elem.movement = setTimeout（repeat,interval）;}

效果图如下：

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。