В этой статье описывается эффект, когда по очереди играет в слайд -шоу в JS. Поделитесь этим для вашей ссылки, следующим образом:
<body> <script language = "javascript" type = "text/javascript"> <!-/*************************************************** Pimgplayer.additem ("test", "http://www.pomoho.com", "http://static.pomoho.com/static/samesong/images/logo5.jpg"); Pimgplayer.additem ("test2", "http://www.pomoho.com.cn", "http://static.pomoho.com/static/samesong/images/logo4.jpg"); Pimgplayer.additem ("test3", "http://www.pomoho.com.cn", "http://static.pomoho.com/static/samesong/images/logo3.jpg"); Pimgplayer.init ("imgplayer", 200, 230); Примечания: подходит для мест, где на странице есть только одно изображение. objid, w, h, time) {this.intervaltime = время || это. Intervaltime; this._container = document.getElementByid (objid); this._container.style.display = "block"; this._container.style.width = w + "px"; this._container.style.height = h + "px"; this._container.style.position = "относительный"; this._container.style.overflow = "hidden"; //this._container.style.border = "1px solid #fff"; var linkstyle = "display: block; text-decoration: none;"; if (document.all) {linkstyle += "filter:"; linkstyle += "progid: dximagetransform.microsoft.barn (продолжительность = 0,5, движение = 'out', orientation = 'vertical')"; linkstyle += "progid: dximagetransform.microsoft.barn (продолжительность = 0,5, движение = 'out', orientation = 'horizontal')"; linkstyle += "progid: dximagetransform.microsoft.blinds (продолжительность = 0,5, полосы = 10, направление = 'вниз')"; linkstyle += "progid: dximagetransform.microsoft.checkerboard ()"; linkstyle += "progid: dximagetransform.microsoft.fade (продолжительность = 0,5, перекрытие = 0)"; linkstyle += "progid: dximagetransform.microsoft.gradientwipe (duration = 1, gradientsize = 1,0, motion = 'reverse')"; linkstyle += "progid: dximagetransform.microsoft.inset ()"; linkstyle += "progid: dximagetransform.microsoft.iris (duration = 1, irisstyle = plus, motion = out)"; linkstyle += "progid: dximagetransform.microsoft.iris (duration = 1, irisstyle = plus, motion = in)"; linkstyle += "progid: dximagetransform.microsoft.iris (duration = 1, irisstyle = diamond, motion = in)"; linkstyle += "progid: dximagetransform.microsoft.iris (duration = 1, irisstyle = diamond, motion = in)"; linkstyle += "progid: dximagetransform.microsoft.iris (duration = 1, irisstyle = square, motion = in)"; linkstyle += "progid: dximagetransform.microsoft.iris (продолжительность = 0,5, irisstyle = star, motion = in)"; linkstyle += "progid: dximagetransform.microsoft.radialwipe (продолжительность = 0,5, Wipestyle = Clock)"; linkstyle += "progid: dximagetransform.microsoft.radialwipe (продолжительность = 0,5, Wipestyle = Wedge)"; linkstyle += "progid: dximagetransform.microsoft.radialwipe (продолжительность = 0,5, Wipestyle = Wedge)"; linkstyle += "progid: dximagetransform.microsoft.randombars (продолжительность = 0,5, ориентация = горизонталь)"; linkstyle += "progid: dximagetransform.microsoft.randombars (продолжительность = 0,5, ориентация = вертикальная)"; linkstyle += "progid: dximagetransform.microsoft.randomdissolve ()"; linkstyle += "progid: dximagetransform.microsoft.spiral (продолжительность = 0,5, gridsizex = 16, gridsizey = 16)"; linkstyle += "progid: dximageTransform.microsoft.stretch (продолжительность = 0,5, streckstyle = push)"; linkstyle += "progid: dximageTransform.microsoft.strips (продолжительность = 0,5, движение = правое значение)"; linkstyle += "progid: dximagetransform.microsoft.wheel (продолжительность = 0,5, спицы = 8)"; linkstyle += "progid: dximagetransform.microsoft.zigzag (продолжительность = 0,5, gridsizex = 4, gridsizey = 40); ширина: 100%; высота: 100%"; } // var ulstyle = "margin: 0; width:"+w+"px; позиция: абсолютно; z-index: 999; справа: 5px; фильтр: альфа (непрозрачность = 30, finidypacity = 90, style = 1); переполнение: hidden; внизу: -1px; высота: 16px; // var listyle = "margin: 0; тип списка: нет; маржа: 0; накладка: 0; float: right;"; // var basespacstyle = "clear: оба; дисплей: block; width: 23px; line-hight: 18px; размер шрифта: 12px; font-family: '安'; непрозрачность: 0,6;"; basespacstyle += "граница: 1px solid #fff; граница правая: 0; пограничный пакет: 0;"; basespacstyle += "color: #fff; text-align: center; cursor: pointer;"; // var ulhtml = ""; for (var i = this._items.length -1; i> = 0; i-) {var spanStyle = ""; if (i == this._index) {spanstyle = basespacstyle + "фон:#ff0000;"; // Инициализировать цвет нижнего числа} else {spanstyle = basespacstyle + "фон:#c0c0c0;"; // Инициализировать цвет фона нижнего числа} ulhtml+= "<li style =/" "+listyle+"/">"; ulHTML += "<span onmouseover=/"PImgPlayer.mouseOver(this);/" onmouseout=/"PImgPlayer.mouseOut(this);/" style=/"+spanStyle+"/" onclick=/"PImgPlayer.play("+i+");return false;/" herf=/"javascript:;/" title=/"" + this._items [i] .title+"/"> "+(i+1)+" </span> "; ulhtml+=" </li> ";} // var html =" <a href =/""+this._items [this._index] .link+"/" title =/"+this._items [this._index]. target =/"_ blank/" style =/"+linkstyle+"/"> </a> <ul style =/"+ulstyle+"/"> "+ulhtml+" </ul> "; this._container.innerhtml = html; var link = this._container.getelementsbytagname ("a") [0]; link.style.width = w + "px"; link.style.height = h + "px"; link.style.background = 'url (' + this._items [0] .img + ') без повторного центра центра'; // this._timer = setInterval ("pimgplayer.play ()", this.intervaltime); }, AddItem: function (_title, _link, _imgurl) {this._items.push ({title: _title, ссылка: _link, img: _imgurl}); var img = новое изображение (); img.src = _imgurl; this._imgs.push (img); }, play: function (index) {if (index! = null) {this._index = index; clearInterval (this._timer); this._timer = setInterval ("pimgplayer.play ()", this.intervaltime); } else {this._index = this._index <this._items.length-1? this._index+1: 0; } var link = this._container.getelementsbytagname ("a") [0]; if (link.filters) {var ren = math.floor (math.random ()*(link.filters.length)); link.filters [ren] .apply (); link.filters [ren] .play (); } link.href = this._items [this._index] .link; link.title = this._items [this._index] .title; link.style.background = 'url (' + this._items [this._index] .img + ') No-Repeat Center Center'; // var listyle = "margin: 0; тип списка: нет; маржа: 0; накладка: 0; float: right;"; var basespacstyle = "clear: и то, и другое; дисплей: block; width: 23px; line-height: 18px; размер шрифта: 12px; font-family: '安'; непрозрачность: 0,6;"; basespacstyle += "граница: 1px solid #fff; граница правая: 0; пограничный пакет: 0;"; basespacstyle += "color: #fff; text-align: center; cursor: pointer;"; var ulhtml = ""; for (var i = this._items.length -1; i> = 0; i-) {var spanStyle = ""; if (i == this._index) {spanstyle = basespacstyle + "фон:#ff0000;"; // цвет чисел} else {spanstyle = basespacstyle + "фон:#c0c0c0;"; // цвет фона чисел} ulhtml+= "<li style =/" "+listyle+"/">"; ulHTML += "<span onmouseover=/"PImgPlayer.mouseOver(this);/" onmouseout=/"PImgPlayer.mouseOut(this);/" style=/"+spanStyle+"/" onclick=/"PImgPlayer.play("+i+");return false;/" herf=/"javascript:;/" title=/"" + this._items [i] .title + "/"> " + (i + 1) +" </span> "; ulhtml + =" </li> ";} this._container.getelementsbytagname (" ul ") [0] .innerhtml = ulhtml;}, mouseover: function (obj (obj) if (this._index! = I-1) {obj.style.color = "#ff0000"; "http://www.lashou.com/", "./images/1001.jpg"); "http://www.meituan.com/", "./images/1003.jpg");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 skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of Алгоритмы и методы обхода JavaScript »и« Сводка использования математических операций JavaScript ».
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.