Lv729254729 2022-05-31 10:34 采纳率: 63.6%
浏览 47
已结题

html javascript这串代码每句话都是什么意思?

如题。 我是一个初学者,没学过js,能告诉我每句话都是什么意思吗?

<script>
window.onload = function(){
  var box=this.document.getElementsByClassName("re")[0];
  var lik=box.getElementsByTagName("li");
  function fun(i,j){//转换图片函数,就是把透明度改了一下
    lik[i].style.opacity=1;
    lik[j].style.opacity=0;
 
   lik[i].style.zIndex=10;
    lik[j].style.zIndex=0;
 
    lik[i+5].style.backgroundColor="#ffffff";//改一下小图标
    lik[j+5].style.backgroundColor="#00000000"
  }
  fun(0,1);//初始化下
  var i =0;
  function auto(){//轮播循环函数
    if(++i>=5){
      i=0;
      fun(0,4);
    }
    else fun(i,i-1);
  }
  timer=this.setInterval(auto,2000);
  box.onmouseover = function () { //鼠标划上去,停止轮播
    console.log('good');
    clearInterval(timer);
  }
  box.onmouseout = function () { //鼠标划出,继续轮播
    timer = setInterval(auto, 2000); //调用定时器
  }
  var j =0;
  for(;j<5;j++){//点击小图标也可以转换图片
    lik[j+5].ind=j;
    lik[j+5].onclick=function(){
      fun(this.ind,i)
      i=this.ind;
    }
  }

}
</script>
<style>
#max{
  width: 900px;
  height: 500px;
  align-items: center;
  margin: 5% auto;
  margin-top: 0%;
  position: absolute;
  left: 190px;
  top: 130px;
}
.re{
  position: relative;
  height: 400px;
}
.re ul{
  list-style-type:none ;
}
.re ul>li{
  width: 600px;
  height: 300px;
  position: absolute;
  left: 100px;
  top: 30px;
  transition: 1s;
  opacity: 0;
}
.re ul>li img{
  width: 700px;
  height: 370px;
  border-radius: 10%;
  border: 15px solid #fffbd6;
}
#max ol {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5,75px);
  grid-template-rows: auto;
  grid-gap: 1em;
  float: right;
  margin-top: 450px;
  list-style: none;
  top:0;left:-150px;
}
#max ol li {
  width: 25px;
  height: 10px;
  font-size: 15px;
  line-height: 20px;
  float: left;
  text-align: center;
  border-radius: 2em;
  border: 5px solid #999999;
}
</style>
<body>
<div id="max">
        <div class="re">
            <ul>
                <li><a href="Fibonacci数列.html"><img src="../images/我的数学笔记002.png" alt="" title="Fibonacci数列" class="imgd"></a></li>
                <li><a href="Euler常数.html"><img src="../images/我的数学笔记015.png" alt="" title="Euler常数" class="imgd"></a></li>
                <li><a href="Wallis公式.html"><img src="../images/我的数学笔记037.png" alt="" title="Wallis公式" class="imgd"></a>></li>
                <li><a href="Newton-Leibniz公式.html"><img src="../images/我的数学笔记061.png" alt="" title="Newton-Leibniz公式" class="imgd"></a>></li>
                <li><a href="Ceva定理.html"><img src="../images/我的数学笔记154.png" alt="" title="Ceva定理" class="imgd"></a></li>
            </ul>
            <ol>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>
    </div>
</body>

这是效果图。

img

  • 写回答

2条回答 默认 最新

  • 小飞LOVE霞 2022-05-31 11:27
    关注
    
     <script>
          // 等待页面加载完毕后,执行JS代码。
          window.onload = function(){
            // 获取class="re"的第一个元素
            var box=this.document.getElementsByClassName("re")[0];
            // 获取标签名称为li的元素
            var lik=box.getElementsByTagName("li");
            //转换图片函数,就是把透明度改了一下
            function fun(i,j){
              // lik[i]的透明度变为不透明
              lik[i].style.opacity=1;
              // lik[j]的透明度变为透明
              lik[j].style.opacity=0;
    
              // lik[i]的z轴变为10
              lik[i].style.zIndex=10;
              // lik[j]的z轴变为0
              lik[j].style.zIndex=0;
              // lik[i+5]的背景颜色变为#ffffff
              lik[i+5].style.backgroundColor="#ffffff";//改一下小图标
              // lik[j+5]的背景颜色变为#00000000
              lik[j+5].style.backgroundColor="#00000000"
            }
            //初始化下
            fun(0,1);
            
            var i =0;
            function auto(){//轮播循环函数
              // 当i比5大的时候,执行fun函数,li变换第1个和第5个的透明度、z轴和背景色
              if(++i>=5){
                i=0;
                fun(0,4);
              }
              // 当i在0~5之间的时候,执行fun函数,li变换第1个和第5个的透明度、z轴和背景色
              else fun(i,i-1);
            }
            // 每2秒执行一次auto函数
            timer=this.setInterval(auto,2000);
            // 鼠标划上去,停止轮播
            box.onmouseover = function () { 
              console.log('good');
              clearInterval(timer);
            }
            //鼠标划出,继续轮播
            box.onmouseout = function () { 
              timer = setInterval(auto, 2000); //调用定时器
            }
            var j =0;
            for(;j<5;j++){//点击小图标也可以转换图片
              lik[j+5].ind=j;
              lik[j+5].onclick=function(){
                fun(this.ind,i)
                i=this.ind;
              }
            }
    
          }
    
        </script>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 6月13日
  • 已采纳回答 6月5日
  • 创建了问题 5月31日

悬赏问题

  • ¥18 深度学习tensorflow1,ssdv1,coco数据集训练一个模型
  • ¥100 关于注册表摄像头和麦克风的问题
  • ¥30 代码本地运行正常,但是TOMCAT部署时闪退
  • ¥15 关于#python#的问题
  • ¥15 主机可以ping通路由器但是连不上网怎么办
  • ¥15 数据库一张以时间排好序的表中,找出多次相邻的那些行
  • ¥50 关于DynamoRIO处理多线程程序时候的问题
  • ¥15 kubeadm部署k8s出错
  • ¥15 Abaqus打不开cae文件怎么办?
  • ¥15 小程序准备上线,软件开发公司需要提供哪些资料给甲方