轮播图-JavaScript

Posted 2020-08-23 panzer

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了轮播图-JavaScript相关的知识，希望对你有一定的参考价值。

轮播图一：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus?">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>轮播图显示一</title>
 </head>
<script type="text/javascript">
<!--
    var n = 0;
    function init(){
        n++;
        if(n == 5){
            n = 1;
        }
        //拿到图片对象
        var img = document.getElementById("img");
        img.src = n + ".png";
        //清空label控件的样式
        var label = document.getElementsByTagName("label");//通标签名字拿取
        for(var i = 0; i < label.length; i++){
            label[i].className = "";
        }
        //设定对应的label控件的样式
        document.getElementById("l" + n).className = "one";
        
        setTimeout("init()",1500);
    
    }
//-->
</script>
<style type="text/css">
    #d{
        position:relative;
        top:-30px;
    }
    label{
        margin-left:20px;
    }
    .one{
        width:10px;
        height:10px;
        border:1px solid black;
        background-color: red;
    }
</style>
 <body onload="init()">
   <div align="center">
    <img src = "1.png" alt="aaa" width="300" height="300" id="img">
    <div id="d">
        <label id = "l1">&nbsp;1&nbsp;</label>
        <label id = "l2">&nbsp;2&nbsp;</label>
        <label id = "l3">&nbsp;3&nbsp;</label>
        <label id = "l4">&nbsp;4&nbsp;</label>
        
    </div>
    </div>

 </body>
</html>

轮播图二：

以上是关于轮播图-JavaScript的主要内容，如果未能解决你的问题，请参考以下文章