มีหลายวิธีในการหมุนภาพ นี่คือสิ่งที่ง่าย: การใช้งานอาร์เรย์ JS
ก่อนอื่นเก็บเส้นทางรูปภาพในอาร์เรย์จากนั้นเรียกใช้ฟังก์ชัน setInterval เพื่อหมุนภาพในทางกลับกัน
<script type = "text/javaScript"> var cuRindex = 0; var timeinterval = 1000; var arr = new Array (); arr [0] = "1.png"; arr [1] = "2.png"; arr [2] = "3.png"; arr [3] = "4.png"; arr [4] = "5.png"; setInterval (ChangeImg, timeLinterval); ฟังก์ชั่นการเปลี่ยนแปลง () {var obj = document.getElementById ("imge"); if (curindex == arr.length-1) {curindex = 0; } else {curindex += 1; } obj.src = arr [curindex]; } </script>ตัวอย่างที่สมบูรณ์ด้านล่าง
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> ใช้อาร์เรย์เพื่อให้ได้ภาพหมุนอิมเมจอัตโนมัติ </title> <style type = "css"> #main {ความกว้าง: 700px; ความสูง: 450px; มาร์จิ้น: 0 อัตโนมัติ; TEXT-ALIGN: CENTER; } </style> <script type = "text/javascript"> var curindex = 0; var timeinterval = 1000; var arr = new Array (); arr [0] = "1.png"; arr [1] = "2.png"; arr [2] = "3.png"; arr [3] = "4.png"; arr [4] = "5.png"; setInterval (ChangeImg, timeLinterval); ฟังก์ชั่นการเปลี่ยนแปลง () {var obj = document.getElementById ("imge"); if (curindex == arr.length-1) {curindex = 0; } else {curindex += 1; } obj.src = arr [curindex]; } </script> </head> <body> <div id = "main"> <h1> ใช้อาร์เรย์เพื่อให้ได้ภาพหมุนอิมเมจอัตโนมัติ </h1> <img id = "imge" src = "1.png"/> </div> </body> </html>การแบ่งปันหัวข้อที่ยอดเยี่ยม: ภาพ jQuery Carousel JavaScript รูปภาพ Carousel Bootstrap Picture Carousel
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน