当前位置：首页 > news >正文

轮播图-JavaScript

news 来源：原创 2024/9/21 13:43:25

轮播图一：

<!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 οnlοad="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>

轮播图二：

<!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;
    var t = 0; //定义一个事件变量
    boolean flag = false;//
    function init(){
        //设置鼠标点击就暂停属性
        //拿到所有的label控件
        var labs = document.getElementsByTagName("label");
        //给每个label控件注册事件
        for(var i = 0; i < labs.length; i++){
            labs[i].onmouseover = function(){
                //让时间停止
                clearTimeout(t);
                //显示对应的图片,此处不能使用labs[i]
                // * 1 转换成整型
                var b = this.innerText * 1
                //拿到img对象
                var img = document.getElementById("img");
                img.src = b + ".png"; //显示成对应的图片
                //清空label控件的样式,清空样式
                var label = document.getElementsByTagName("label");//通标签名字拿取
                for(var i = 0; i < label.length; i++){
                        label[i].className = "";
                }
                //同时，让label的样式变成one
                this.className = "one";
            }
            //再注册一个事件，鼠标离开后继续开始
            labs[i].onmouseout = function(){
                //隔1秒调用fun()
                setTimeout("fun()",1000);
                //改变n的值
                n = this.innerText * 1;
                //离开时设置为false
                flag = false;
            }
        }
        fun();
    }
    function fun(){//单独创建一个函数
        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";
        
        t = setTimeout("fun()",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 οnlοad="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>