兼容ie8,9,10,11波浪

#波浪

<div class="warp">
    <div class="wave-box">
      <div class="marquee-box marquee-up" id="marquee-box">
        <div class="marquee">
          <div class="wave-list-box" id="wave-list-box1">
            <ul>
              <li>
                <img height="60" alt="波浪" src="images/wave_02.png">
              </li>
            </ul>
          </div>
          <div class="wave-list-box" id="wave-list-box2">
            <ul>
              <li>
                <img height="60" alt="波浪" src="images/wave_02.png">
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="marquee-box" id="marquee-box3">
        <div class="marquee">
          <div class="wave-list-box" id="wave-list-box4">
            <ul>
              <li>
                <img height="60" alt="波浪" src="images/wave_01.png">
              </li>
            </ul>
          </div>
          <div class="wave-list-box" id="wave-list-box5">
            <ul>
              <li>
                <img height="60" alt="波浪" src="images/wave_01.png">
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  list-style:none
}
body{
  font-family:microsoft yahei;
  min-width:1000px
}
a{
  outline:0;text-decoration:none
}
strong{font-weight:400}
.strong{font-weight:700}
::selection{
  background:#1eacdf;
  color:#fff
}
img{border:0}
@media screen and (max-width:1233px){
  .auto{padding-left:10px}
}
.clearfix:after,
.clearfix:before{
  display:table;
  line-height:0;
  content:""
}
.clearfix:after{clear:both}
.clear-float{clear:both}
.warp {
  margin-top: 100px;
}
.marquee-box{
  overflow:hidden;
  width:100%;
  position:absolute;
  left:0;
  top:0
}
.marquee{
  width:8000%;
  height:60px
}
.wave-list-box{
  float:left
}
.wave-list-box ul{
  float:left;
  height:60px;
  overflow:hidden;
  zoom:1
}
.wave-list-box ul li{
  height:60px;
  width:100%;
  float:left;
  line-height:30px;
  list-style:none
}
.wave-box{
  position:relative;
  height:60px;
  background:#fff
}

$(function(){
    let marqueeScroll=function(id1,id2,id3,timer){
      let $parent=$("#"+id1)
      let $goal=$("#"+id2)
      let $closegoal=$("#"+id3)
      $closegoal.html($goal.html())
      function Marquee(){
        if(parseInt($parent.scrollLeft())-$closegoal.width()>=0){
          $parent.scrollLeft(parseInt($parent.scrollLeft())-$goal.width())
        }else{
          $parent.scrollLeft($parent.scrollLeft()+1)
        }
      }
    setInterval(Marquee,timer)
  }
  let marqueeScroll1=new marqueeScroll("marquee-box","wave-list-box1","wave-list-box2",20)
  let marqueeScroll2=new marqueeScroll("marquee-box3","wave-list-box4","wave-list-box5",40)
})