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

前端之家收集整理的这篇文章主要介绍了JS实现的幻灯片切换显示效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

html:

纯JS幻灯版

js:

Box() { 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="
"; html += "
"; html += "
"; html += "
"; document.write(html); },_init : function (){ var picstyle= ""; var eventstr = "PPTBoxHelper.instance['"+this.uid+"']"; var imageHTML=""; var flashBox = ""; for(var i=0;iBox.length;i++){ var parame = this._Box[i]; flashBox += this.flashHTML(parame.url,this.width,this.height,i); imageHTML ="
SEOver=\""+eventstr+".mouSEOverPic("+i+")\">
" + 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 = "" + "" + "" + "" + "" +" "; } else { var eventstr = "PPTBoxHelper.instance['"+this.uid+"']"; var style = ""; if(this._Box[idx].href){ style = "cursor:pointer" } html="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程序设计有所帮助。

原文链接:https://www.f2er.com/js/46017.html

猜你在找的JavaScript相关文章