JS画像自動カルーセルコード共有（JSピクチャーズカルーセル）

著者：Eve Cole 更新時間：2025-07-01 04:48:01

1.画像幅の表示位置を使用して、写真を再生します。テクノロジー：.OffsetWidth、abtn [i] .index = i、setinterval（）、oul [0] .style.left =、onclick（）

2。アレイを使用して、カルーセルに写真を入れます。テクノロジー：SetInterval（）。 onclick（）はありません

写真Carousel 12js.html

コードコピーは次のとおりです。

<！doctype html public " - // w3c // dtd xhtml 1.0 strict // en"

"http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">

<head>

<title>画像スライド</title>

* {

マージン：0px;

パディング：0px;

}

li {

リストスタイル：なし;

}

img {

ボーダー：0;

}

{

テキスト装置：なし;

}

#slide {

幅：800px;

高さ：400px;

Box-Shadow：0PX 0PX 5PX＃C1C1C1;

マージン：20px Auto;

位置：相対;

オーバーフロー：隠し;

}

#slide ul {

位置：絶対;

左：0px;

上：0px;

高さ：400px;

幅：11930px;

}

#slide ul li {

幅：800px;

高さ：400px;

オーバーフロー：隠し;

フロート：左;

}

#slide .ico {

幅：800px;

高さ：20px;

オーバーフロー：隠し;

テキストアライグ：センター;

位置：絶対;

左：0px;

下：10px;

z-index：1;

}

#slide .ico a {

ディスプレイ：インラインブロック。

幅：10px;

高さ：10px;

背景：url（out.png）繰り返し0px 0px;

マージン：0px 5px;

}

#slide .ico .active {

背景：url（out1.png）繰り返し0px 0px;

}

#btnleft {

幅：60px;

高さ：400px;

左：0px;

上：0px;

背景：url（）no-repeat 0px 0px;

位置：絶対;

z-index：2;

}

#btnleft：hover {

背景：url（）no-repeat 0px 0px;

}

#btnright {

幅：60px;

高さ：400px;

右：0px;

上：0px;

背景：url（）no-repeat 0px 0px;

位置：絶対;

z-index：2;

}

#btnright：hover {

背景：url（）no-repeat 0px 0px;

}

</style>

window.onload = function（）{

var oico = document.getElementById（ "ico"）;

var abtn = oico.getelementsbytagname（ "a"）;

var oslide = document.getElementById（ "Slide"）;

var oul = oslide.getElementsByTagname（ "ul"）;

var ali = oul [0] .getelementsbytagname（ "li"）;

var obtnleft = document.getElementById（ "btnleft"）;

var obtnright = document.getElementById（ "btnright"）;

var baseWidth = ali [0] .OffsetWidth;

// alert（basewidth）;

oul [0] .style.width = baseWidth * ali.length + "px";

var inow = 0;

for（var i = 0; i <abtn.length; i ++）{

abtn [i] .index = i;

abtn [i] .onclick = function（）{

//alert(this.index）;

//Alert(TOl.Left）;

移動（this.index）;

//aico [this.index] .classname = "Active";

}

obtnleft.onclick = function（）{

inow ++;

//document.title = inow;

移動（inow）;

}

obtnright.onclick = function（）{

inow-;

document.title = inow;

移動（inow）;

}

var curindex = 0;

var timeinterval = 1000;

setInterval（change、timeinterval）;

関数変化（）{

if（curindex == abtn.length）{

curindex = 0;

} それ以外 {

移動（curindex）;

curindex += 1;

}

関数移動（index）{

//document.title = index;

if（index> ali.length-1）{

index = 0;

inow = index;

}

if（index <0）{

index = ali.length -1;

inow = index;

}

for（var n = 0; n <abtn.length; n ++）{

abtn [n] .classname = "";

}

abtn [index] .classname = "Active";

oul [0] .style.left = -index * baseWidth + "px";

// buffer（oul [0]、{

//左：-index * baseWidth

//}、8）

}

</script>

</head>

<body>

<！ - 次の画像を変更するとき：style = "left： - （n-1）*800px;" - >

<ul>

</ul>

</div>

</body>

</html>

画像は自動的にplay.htmlです

コードコピーは次のとおりです。

<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<head>

var curindex = 0;

var timeinterval = 1000;

var arr = new array（）;

arr [0] = "1.jpg";

arr [1] = "2.jpg";

arr [2] = "3.jpg";

arr [3] = "4.jpg";

arr [4] = "5.jpg";

arr [5] = "6.jpg";

arr [6] = "7.jpg";

setInterval（changeimg、timeinterval）;

function changeimg（）{

var obj = document.getElementById（ "obj"）;

if（curindex == arr.length-1）{

curindex = 0;

} それ以外 {

curindex += 1;

}

obj.src = arr [curindex];

}

</script>

<！ - <スクリプト言語= "JavaScript">

SetInterval（テスト、1000）;

var array = new Array（）;

var index = 0;

var array = new Array（ "image/1.jpg"、 "image/2.jpg"、 "image/3.jpg"、 "image/4.jpg"、 "image/5.jpg"、 "image/6.jpg"、 "image/7.jpg"、 "image/8.jpg"、 "image/9.jpg"、 "image/" "）;

function test（）{

var myimg = document.getElementById（ "IMGS"）;

if（index == array.length-1）

{index = 0; } else {index ++; }

myimg.src = array [index];

}

</script> - >

</head>

<body>

</body>

</html>