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 () 없음

그림 회전 목마 12js.html

코드 사본은 다음과 같습니다.

<! doctype html public "-// w3c // dtd xhtml 1.0 엄격한 // en"

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

<헤드>

<스타일 유형 = "텍스트/CSS">

* {

여백 : 0px;

패딩 : 0px;

}

Li {

목록 스타일 : 없음;

}

img {

국경 : 0;

}

A {

텍스트 결정 : 없음;

}

#Slide {

너비 : 800px;

높이 : 400px;

Box-Shadow : 0px 0px 5px #c1c1c1;

마진 : 20px 자동;

위치 : 상대;

오버플로 : 숨겨진;

}

#Slide ul {

위치 : 절대;

왼쪽 : 0px;

상단 : 0px;

높이 : 400px;

너비 : 11930px;

}

#slide ul li {

너비 : 800px;

높이 : 400px;

오버플로 : 숨겨진;

플로트 : 왼쪽;

}

#Slide .ICO {

너비 : 800px;

높이 : 20px;

오버플로 : 숨겨진;

텍스트 정렬 : 센터;

위치 : 절대;

왼쪽 : 0px;

하단 : 10px;

z- 인덱스 : 1;

}

#slide .ico a {

디스플레이 : 인라인 블록;

너비 : 10px;

높이 : 10px;

배경 : URL (out.png) no-repeat 0px 0px;

마진 : 0px 5px;

}

#Slide .ICO .Active {

배경 : URL (out1.png) no-Repeat 0px 0px;

}

#btnleft {

너비 : 60px;

높이 : 400px;

왼쪽 : 0px;

상단 : 0px;

배경 : url () no-Repeat 0px 0px;

위치 : 절대;

z- 인덱스 : 2;

}

#btnleft : 호버 {

배경 : url () no-Repeat 0px 0px;

}

#btnright {

너비 : 60px;

높이 : 400px;

오른쪽 : 0px;

상단 : 0px;

배경 : url () no-Repeat 0px 0px;

위치 : 절대;

z- 인덱스 : 2;

}

#btnright : 호버 {

배경 : url () no-Repeat 0px 0px;

}

</스타일>

Window.onload = function () {

var oico = document.getElementById ( "ico");

var abtn = oico.getElementsByTagName ( "a");

var oslide = document.getElementById ( "슬라이드");

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(oul]] .Style.left);

이동 (this.index);

//aico] this.index] .classname = "active";

}

obtnleft.onclick = function () {

inow ++;

//document.title = inow;

이동 (inow);

}

obtnright.onclick = function () {

inow-;

문서 .title = inow;

이동 (inow);

}

var curindex = 0;

var timeinterval = 1000;

SetInterval (Change, TimeInterval);

함수 변경 () {

if (curindex == abtn.length) {

curindex = 0;

} 또 다른 {

이동 (curindex);

curindex += 1;

}

함수 이동 (색인) {

//document.title = index;

if (index> ali.length-1) {

색인 = 0;

inow = index;

}

if (index <0) {

색인 = 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";

// 버퍼 (oul [0], {

// 왼쪽 : -index * basewidth

//}, 8)

}

</스크립트>

</head>

<body>

<!-다음 이미지를 변경할 때 : style = "왼쪽 :-(n-1)*800px;"->

<ul>

</ul>

</div>

</body>

</html>

이미지는 자동으로 재생됩니다 .html

코드 사본은 다음과 같습니다.

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

<헤드>

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);

함수 changeimg () {

var obj = document.getElementById ( "obj");

if (curindex == arr.length-1) {

curindex = 0;

} 또 다른 {

curindex += 1;

}

obj.src = arr [curindex];

}

</스크립트>

<!- <script language = "javaScript">

setInterval (테스트, 1000);

var array = new Array ();

var index = 0;

var array = new Array ( "image/1.jpg", "image/2.jpg", "image/3.jpg", "im

기능 test () {

var myimg = document.getElementById ( "imgs");

if (index == array.length-1)

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

myimg.src = 배열 [index];

}

</script> ->

</head>

<body>

</body>

</html>