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 เข้มงวด // en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml: lang = "en">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = iso-8859-1" />
<title> ภาพสไลด์ </title>
<style type = "text/css">
-
มาร์จิ้น: 0px;
Padding: 0px;
-
หลี่ {
รายการสไตล์: ไม่มี;
-
img {
ชายแดน: 0;
-
A {
การตกแต่งข้อความ: ไม่มี;
-
#Slide {
ความกว้าง: 800px;
ความสูง: 400px;
Box-Shadow: 0PX 0PX 5PX #C1C1C1;
มาร์จิ้น: 20px auto;
ตำแหน่ง: ญาติ;
ล้น: ซ่อน;
-
#Slide ul {
ตำแหน่ง: สัมบูรณ์;
ซ้าย: 0px;
ด้านบน: 0px;
ความสูง: 400px;
ความกว้าง: 11930px;
-
#lide ul ul li {
ความกว้าง: 800px;
ความสูง: 400px;
ล้น: ซ่อน;
ลอย: ซ้าย;
-
#Slide .ico {
ความกว้าง: 800px;
ความสูง: 20px;
ล้น: ซ่อน;
TEXT-ALIGN: CENTER;
ตำแหน่ง: สัมบูรณ์;
ซ้าย: 0px;
ด้านล่าง: 10px;
z-index: 1;
-
#Slide .ico a {
แสดง: Inline-Block;
ความกว้าง: 10px;
ความสูง: 10px;
ความเป็นมา: URL (out.png) ไม่มีการทำซ้ำ 0px 0px;
มาร์จิ้น: 0px 5px;
-
#Slide .ico .ACTIVE {
ความเป็นมา: URL (out1.png) ไม่มีการทำซ้ำ 0px 0px;
-
#btnleft {
ความกว้าง: 60px;
ความสูง: 400px;
ซ้าย: 0px;
ด้านบน: 0px;
ความเป็นมา: url () ไม่ซ้ำ 0px 0px;
ตำแหน่ง: สัมบูรณ์;
z-index: 2;
-
#btnleft: โฮเวอร์ {
ความเป็นมา: url () ไม่ซ้ำ 0px 0px;
-
#btnright {
ความกว้าง: 60px;
ความสูง: 400px;
ขวา: 0px;
ด้านบน: 0px;
ความเป็นมา: url () ไม่ซ้ำ 0px 0px;
ตำแหน่ง: สัมบูรณ์;
z-index: 2;
-
#btnright: โฮเวอร์ {
ความเป็นมา: url () ไม่ซ้ำ 0px 0px;
-
</style>
<script type = "text/javascript">
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;
สำหรับ (var i = 0; i <abtn.length; i ++) {
abtn [i] .index = i;
abtn [i] .onclick = function () {
//alert( this.index);
//alert(oul [0 เหมือนกัน style.left);
ย้าย (this.index);
//aico [this.index ame.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 (เปลี่ยน, timeinterval);
ฟังก์ชั่นเปลี่ยน () {
if (curindex == abtn.length) {
curindex = 0;
} อื่น {
ย้าย (curindex);
curindex += 1;
-
-
ฟังก์ชั่นย้าย (ดัชนี) {
//document.title = ดัชนี;
ถ้า (ดัชนี> Ali.Length-1) {
ดัชนี = 0;
INOW = ดัชนี;
-
ถ้า (ดัชนี <0) {
index = Ali.Length - 1;
INOW = ดัชนี;
-
สำหรับ (var n = 0; n <abtn.length; n ++) {
abtn [n] .className = "";
-
abtn [ดัชนี] .className = "ใช้งาน";
OUL [0] .style.left = -index * basewidth + "px";
// buffer (oul [0], {
// ซ้าย: -index * basewidth
//}, 8)
-
-
</script>
</head>
<body>
<div id = "slide">
<a id = "btnleft" href = "JavaScript: void (0);" > </a>
<a id = "btnright" href = "JavaScript: void (0);" > </a>
<!-เมื่อเปลี่ยนภาพถัดไป: style = "ซ้าย:-(n-1)*800px;"->
<ul>
<li> <img src = "1.jpg" /> </li>
<li> <img src = "2.jpg" /> </li>
<li> <img src = "3.jpg" /> </li>
<li> <img src = "4.jpg" /> </li>
<li> <img src = "5.jpg" /> </li>
<li> <img src = "6.jpg" /> </li>
</ul>
<div id = "ico">
<a href = "JavaScript: void (0);"> </a>
<a href = "JavaScript: void (0);"> </a>
<a href = "JavaScript: void (0);"> </a>
<a href = "JavaScript: void (0);"> </a>
<a href = "JavaScript: void (0);"> </a>
<a href = "JavaScript: void (0);"> </a>
</div>
</div>
</body>
</html>
รูปภาพเล่นโดยอัตโนมัติ 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> รูปภาพ </title>
<script type = "text/javascript">
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, timeLinterval);
ฟังก์ชั่น CHAINGIMG () {
var obj = document.getElementById ("obj");
if (curindex == arr.length-1) {
curindex = 0;
} อื่น {
curindex += 1;
-
obj.src = arr [curindex];
-
</script>
<!- <ภาษาสคริปต์ = "JavaScript">
setInterval (ทดสอบ 1,000);
var array = new Array ();
ดัชนี var = 0;
var array = 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", "รูปภาพ/9.jpg"
ฟังก์ชั่นทดสอบ () {
var myimg = document.getElementById ("IMGS");
if (index == array.length-1)
{index = 0; } else {index ++; -
myimg.src = อาร์เรย์ [ดัชนี];
-
</script> ->
</head>
<body>
<img id = "obj" src = "1.jpg" border = 0 />
</body>
</html>