Rumah > hujung hadapan web > tutorial js > Melaksanakan karusel imej berdasarkan kemahiran javascript array_javascript

Melaksanakan karusel imej berdasarkan kemahiran javascript array_javascript

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan: 2016-05-16 15:02:38
asal
1897 orang telah melayarinya

Terdapat banyak cara untuk imej karusel Di sini kami memperkenalkan yang mudah: pelaksanaan tatasusunan js.

Mula-mula simpan laluan imej dalam tatasusunan, dan kemudian panggil fungsi setInterval untuk memutar imej dalam urutan

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

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

 function changeImg() {

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

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

    curIndex = 0;

   } else {

    curIndex += 1;

   }

   obj.src = arr[curIndex];

 }

</script>

Salin selepas log masuk

Contoh lengkapnya adalah seperti berikut

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>使用数组实现图片自动轮播</title>

 <style type="text/css">

  #main{

   width: 700px;

   height: 450px;

   margin: 0 auto;

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

  function changeImg() {

    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" alt="picture" />

 </div>

</body>

</html>

Salin selepas log masuk

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Isu terkini
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan