最初にエフェクトディスプレイ画像を見せてください
以下は詳細なコードです。
コードコピーは次のとおりです。
function lgy_picswitch（option）{
this.owrap = this.getid（option.wrapid）; //最も外側の要素
this.olistwrap = this.getNodeByClassName（this.owrap、 'gy_picswitch_listwrap'）[0];
this.oul = this.olistwrap.getelementsbytagname（ 'ul'）[0];
this.obtnprev = this.getNodeByClassName（this.owrap、 'gy_picswitch_prev'）[0];
this.obtnnext = this.getNodeByClassName（this.owrap、 'gy_picswitch_next'）[0];
this.nlen = this.oul.getElementsBytagname（ 'li'）。length; //写真の総数
this.nscollcount = option.scrollcount; // 1時間あたりのスクロール数
this.nscolllen = math.ceil（this.nlen/option.scrollcount）; //判断の最大値を切り替えます
this.nswitchWidth = 0; //切り替えるたびに距離が移動し、コード内の値を動的に取得します
this.nindex = 0; //画像の現在のインデックスを切り替えます
this.timer = null; //画像の引用値を切り替えます
this.int（）;
}
lgy_picswitch.prototype = {
getId：function（id）{
document.getElementByID（ID）を返します。
}、
getNodeByClassName：function（parent、className）{
var classelements = new Array（）;
var els = parent.getelementsbytagname（ '*'）;
var elslen = els.length;
var pattern = new regexp（ "（^| // s）"+className+"（// s | $）"）;
for（i = 0、j = 0; i <elslen; i ++）{
if（pattern.test（els [i] .classname））{
classelements [j] = els [i];
J ++;
}
}
classelementsを返します。
}、
getCSS：function（node、value）
{
return node.currentStyle？node.currentStyle [value]：getComputedStyle（node、null）[value];
}、
setcss：function（node、val）{
for（var v in val）{
node.style.csstext += ';' +v +'：' +val [v];
}
}、
movefn：function（node、value、targetvalue、callback）{
var _that = this;
ClearInterval（this.timer）;
this.timer = setInterval（function（）
{
var val = parsefloat（_that.getcss（node、value））;
var speed =（targetvalue- val）/8;
速度=速度> 0？math.ceil（speed）：math.floor（speed）;
if（speed == 0）
{
ClearInterval（_that.timer）;
callback && callback（）;
}
それ以外
{
node.style [value] =（val + speed） + 'px';
}
}、20）;
}、
picchange：function（）{
this.movefn（this.oul、 'marginleft'、-this.nindex*this.nswitchwidth）;
}、
cancelbubble：function（e）{
e.StopPropagation？E.StopPropagation（）：E.CancelBubble = true;
}、
btnisshow：function（）{
this.setcss（this.obtnnext、{'display'： 'block'}）;
this.setcss（this.obtnprev、{'display'： 'block'}）;
if（this.nindex == 0）this.setcss（this.obtnprev、{'display'： 'none'}）;
if（this.nindex ==（this.nscolllen-1））this.setcss（this.obtnnext、{'display'： 'none'}）;
}、
btnprev：function（）{
var _that = this;
this.obtnprev.onclick = function（e）{
var e = e || window.event;
_that.cancelbubble（e）;
if（_that.nindex！= 0）{
_that.nindex--;
_that.picchange（）;
_that.btnissoh（）;
}
}
}、
btnnext：function（）{
var _that = this;
this.obtnnext.onclick = function（e）{
var e = e || window.event;
_that.cancelbubble（e）;
if（_that.nindex！=（_that.nscolllen-1））{
_that.nindex ++;
_that.picchange（）;
_that.btnissoh（）;
}
}
}、
int：function（）{
//動きの幅を動的に取得します
var oli = this.oul.getelementsbytagname（ 'li'）[0]、
oli_w = oli.offsetwidth + parseint（this.getcss（oli、 'marginleft'）） + parseint（this.getcss（oli、 'marginright'）））;
this.nswitchwidth = oli_w*this.nscollcount;
//ボタン表示初期化
this.btnissoh（）;
//左右に切り替えます
this.btnprev（）;
this.btnnext（）;
}
}
HTMLコード：
コードコピーは次のとおりです。
/*
* HTML構造は次のとおりでなければなりません：外側のID名、次のように渡します：id = "gy_picswitch02"、id name、suctiallyにそれを与えます
ただし、クラス名を含む内部の構造は同じでなければなりません
<div id = "gy_picswitch02">
<span> </span>
<span> </span>
<div>
<ul>
<li> <img src = "images/pic01.jpg"> </li>
<li> <img src = "images/pic02.jpg"> </li>
<li> <img src = "images/pic03.jpg"> </li>
<li> <img src = "images/pic04.jpg"> </li>
<li> <img src = "images/pic05.jpg"> </li>
<li> <img src = "images/pic06.jpg"> </li>
<li> <img src = "images/pic07.jpg"> </li>
<li> <img src = "images/pic08.jpg"> </li>
</ul>
</div>
</div>
パラメーター： 'wrapid'： 'xxxx'、最も外側のID名
「ScrollCount」：5、スクロールの数
コードコピーは次のとおりです。
*
*/
//インスタンス化
new lgy_picswitch（{'wrapid'： 'gy_picswitch'、 'scrollcount'：5}）;
とても便利な機能ですか？また、非常に使いやすいです。私はここで友達にそれをお勧めします、私はそれが誰にでも役立つことを願っています