一、轮播图

1.布局及实现思路

我用的是叠加的方式

<div  id="long" >
  <div id="long1"><img src="http://a.hiphotos.baidu.com/image/h%3D300/sign=194caab2b50e7bec3cda05e11f2fb9fa/960a304e251f95caf1852c0bc4177f3e6709521e.jpg" width="300px" height="260px" /></div>
  <div id="long2">
    <img src="http://b.hiphotos.baidu.com/image/h%3D300/sign=d33763aa6fd0f703f9b293dc38fb5148/faf2b2119313b07e93a465b501d7912397dd8c75.jpg" width="300px" height="260px" />
  </div>
  <div id="long3">
    <img src="http://d.hiphotos.baidu.com/image/h%3D300/sign=d58f6cac5e43fbf2da2ca023807fca1e/9825bc315c6034a84d0cf125c6134954082376a3.jpg" width="300px" height="260px" />
  </div>

起初给他们的style中全部display：none；当哪张照片显示时哪个div的display：block；三个子容器的宽高都是一样的，然后每个子容器都相对父容器绝对定位，都是left：0；top：0；以达到重叠效果。

<style>
  *{
    margin: 0;padding:0;
  }
  #long{
    width: 300px;
    height: 260px;
    margin: 0 auto;
    position: relative;


  }
  #long1{
    width: 300px;
    height: 260px;
    position: absolute;
    left: 0;
    top:0;
    display: none;
  }
  #long2{
    width: 300px;
    height: 260px;
    left: 0;
    top:0;
  position: absolute;
    display: none;

  }
  #long3{
    width: 300px;
    height: 260px;
    left: 0;
    top:0;
    position: absolute;
    display: none;
  }

</style>

2.用js实现轮播

<script type="text/javascript">
var num=1;
var mytryy=document.getElementById("long");
function hishow() {
  for(var i=1;i<=3;i++){
    if(i==num){
      document.getElementById("long"+num).style.display="block";
    }
    else {
      document.getElementById("long"+i).style.display="none";
    }
  }
    if(num==3){
      num=1;
    }
    else {
      num++;
    }
}


timer=setInterval(hishow,1000);


</script>

3.总结

刚开始的思路是通过改变绝对定位里left的值以实现功能，后来因为不能把中间的显示框做出来失败而告终，当看到一个案列发现是叠加实现的，随即改为这种实现方式，但是怎么控制让一个显示两个隐藏并且轮换可是费了很久，在这里我学会了一开始不先用定时器而采用点击按钮触发事件的发生来检测自己的代码是否有问题。在制作轮播事件的过程中我对for循环的理解更深了，例如“for(var i=1;i<=3;i++)”这个循环，当i的值大于3时才会退出这个for循环进而去执行if语句，所以之前的理解就导致js程序出错自己还不知道问题在哪！！

二、悬浮广告

1、布局

把一个大的div框作为悬浮的区域，里面放一个小的div，在div容器内放置图片，宽高和div容器一样。

<div id="obj">
  <div id="obj1"><img src="http://www.nun.edu.cn/resource/20181224/20181224111506524.jpg" style="width: 700px;height:500px"></div>

</div>

给两个div框设置样式，其中子div设置绝对定位，父容器设置相对定位

<style>
  *{
    margin:0;
    padding:0;
  }
  #obj{
    margin: 0 auto;
    width: 5000px;
    height:3000px;
    background: antiquewhite;
    position: relative;
  }
  #obj1{
    width:700px;
    height: 500px;
position: absolute;
    background: #ff100c;

  }

</style>

2、用js实现悬浮

用js实现子div浮动 并用按钮做测试触发事件，当触发成功后改用计时器触发并增加鼠标悬停离开继续效果

<script type="text/javascript">
  var x=0;
  var y=0;
  var img=document.getElementById("obj1");
  var speed1=2;
  var speed2=1;
function move() {
   if(x>=4300||x<0){speed1=-speed1}
   if(y>=2500||y<0){speed2=-speed2}
  x=x+speed1;
  y=y+speed2;
  img.style.left=x;
  img.style.top=y;

}
  timer=setInterval(move,30);
  img.onmouseover=function() {clearInterval(timer)};
    img.onmouseout=function () {timer=setInterval(move,30) };

</script>

3、总结

这个过程中借鉴做轮播图经验先用按钮做触发事件后改为计时器，效率高了很多，对于全局变量也有了一个理解，函数在执行时首先会处理声明过得变量，所以刚开始我把x,y两个变量放在了函数里面，所以程序出现了bug，当然这方面还有很多知识需要学习。