В этой статье описывается эффект отображения слайда, реализованный 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> Pure JS Slide версия </title> <style Type = "text/css">*{Margin: 0; Подкладка: 0;}#Banner {ширина: 1000px; текстовый Align: left; Фон: #ffff; Margin: 0 Auto;}#Banner img {display: block; float: left;}. Mainbox {Overflow: Hidden; позиция: относительно;}. Flashbox {Overflow: Hidden; Положение: относительно;}. Imagebox {text-align: справа; положение: относительно; z-index: 999;}. Bitdiv {Display: inline block; ширина: 18px; высота: 18px; margin: 0 10px 10px 0px; cursor: pointer; 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 = новый pptbox (); Box.width = 1000; // width box.height = 226; // height box.autoplayer = 3; // Время интервала автоматического интервала // box.add ({"url": "Адрес изображения", "название": "hoot title", "href": "адрес ссылки"}) box.add ({"url": "styles/images/fck_04.jpg", "href": "###", "title": "Hoom rampt witn 1"}); box.add ({"url": "styles/images/fck_04.jpg", "href": "###", "title": "Hoom rampt witn 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; это ._ $ = 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 parameter = this._box [i]; flashbox += this.flashhtml (parame.url, this.width, this.height, i); ImageHtml = "<div class = 'bitDiv"+((i == 0)? Onmouseover =/"+Eventtr+". Mouseoverpic ("+i+")/"> </div>"+imagehtml; ClearInterval (this._autoplay); setInterval (EventStr, this.autoplayer*1000); classid = 'clSID: d27cdb6e-ae6d-11cf-96b8-444553540000' "+" codebase = 'http: //download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0' width = "+"+"+"+"+"+"+"+"+"+"+"+"+"+". Height = '"+height+"'> "+" <param name =/"movie/" value =/"+url+"/"/>"+"<param name = 'value' value = 'high'/>"+"<param name = 'wmode' value = 'wmode'>"+"<embed src = '+url+"' with 'wmode ='+" pluginspage = 'http: //www.macromedia.com/go/getflashplayer' "+" type = 'application/x-shockwave-flash' height = '"+height+"'> </embed> "+" </object> ";} else {varstr =" pptboxhelper.instance ["+this. if (this._box [idx] .href) {style = "cursor: pointer"} html = "<img src = '"+url+"' style = 'width:"+width+"px; height:"+height+"px;"+style+"onclick =/"+eventstr+". } return html; }, изменение Index: function (idx) {var parameter = 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 difimg"; imgs [this._box.length-1-idx] .classname = "bitdiv curimg"; this._curindex = idx; }, mouseOverpic: function (idx) {this.changeindex (idx); if (this.autoplay> 0) {clearinterval (this._autoplay); var eventstr = "pptboxHelper.instance ['"+this.uid+"'] ._ play ()"; this._autoplay = setInterval (Eventstr, this.autoplayer*1000); }}, clickpic: function (idx) {var parameter = this._box [idx]; if (parame.href & ¶me.href! = "") {window.open (parame.href, this.target); }}, добавить: 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, exants: {}, getId: function () {return '_ppt_box-'+(this.count ++); } / if (! document.getElementById (elementId)) вернуть 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+","+интервал+")"; elem.movement = settimeout (повторный, интервал);}Рендеринги следующие:
For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm techniques", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm techniques", and «Сводка использования математических операций JavaScript»
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.