首页 > web前端 > js教程 > js如何利用setInterval定时器方法实现轮播图 (完整代码)

js如何利用setInterval定时器方法实现轮播图 (完整代码)

不言
发布: 2018-08-13 16:08:36
原创
8204 人浏览过

本篇文章给大家带来的内容是关于js如何利用setInterval定时器方法实现轮播图 (完整代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

以前去面试的面试的时候 ,面试官直接叫我手写一个轮播图,那是刚出来,所以js也不厉害,所以直接说不会写,如果想要高薪js还是要会,平时无聊就学一下也行的,现在利用setInterval定时器方法开发 一个原生的轮播图;

代码如下:

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

42

43

44

45

46

47

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        *{margin:0;padding: 0;}

        #main{width:490px;margin:100px auto;}

        #main img{width:100%;height:300px}

        #main li{list-style: none;float: left;width:47px;border:1px solid orange;text-align: center;

            padding:6px;

        }

        .orange{background-color: orange}

    </style>

</head>

<body>

<p id="main">

    <img src="img/1.jpg">

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

        <li>6</li>

        <li>7</li>

        <li>8</li>

    </ul>

</p>

<script type="text/javascript">

    var op = document.getElementsByTagName("img")[0];

    var oLi = document.getElementsByTagName("li");

    var count =1;

    var timer = setInterval(function () {

        op.src = "img/"+count+".jpg";

        for ( var i=0;i<oLi.length;i++ ){

            oLi[i].className = &#39;&#39;;

        }

        oLi[count-1].className = "orange";

        count++;

        if (count>8){

            count=1;

        }

    },1000)

</script>

</body>

</html>

登录后复制

示例图:

相关推荐:

js数组去重的方法有哪些?js数组去重五种方法总结(附代码)

jquery中图片无序预加载的实现以及使用方法

以上是js如何利用setInterval定时器方法实现轮播图 (完整代码)的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
js
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
javascript - js addClass 无效
来自于 1970-01-01 08:00:00
0
0
0
php调用js并获取js的返回值问题
来自于 1970-01-01 08:00:00
0
0
0
javascript - js代码转python
来自于 1970-01-01 08:00:00
0
0
0
找不到js文件代码
来自于 1970-01-01 08:00:00
0
0
0
js高级教程
来自于 1970-01-01 08:00:00
0
0
0
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板