Detailed explanation of the use of js picture seamless scrolling plug-in

ul {
 list-style: none;
 margin: 0;
 padding: 0;
 }

.slide-img-ul {
 white-space: nowrap;
}

.slide-img-ul>li {
 width: 100px;
 height: 100px;
 margin: 10px;
 display: inline-block;
 vertical-align: middle
}

.slide-img-ul>li>img {
 width: 100%;
 height: 100%;
 max-width: 100%;
 max-height: 100%;
}

<div ></div>
<div ></div>

;(function(window , document) {
 function createImg(ele , opt) {
 var def = {
  arrImg: [
  {src:'../img/' , id:'0'},
  {src:'../img/' , id:'1'},
  {src:'../img/' , id:'2'},
  {src:'../img/' , id:'3'},
  {src:'../img/' , id:'4'},
  ] ,
  currentData: 0, 
  time: 50 //Sliding speed }
 //Add css style for ele  = '240px';
  = '120px';
  = 'hidden';
  = '1px solid #eee';
  = '0 0 8px 2px #eee';
  = 'relative';

 //(target , source) method is used to copy the values ​​of all enumerable properties from one or more source objects to the target object.  Returns the target object. var obj = (def , opt), 
  _ul = ('ul'),
  str = '',
  demo

  _ul.setAttribute('class' , 'slide-img-ul') 

 ((item , index) => {
  str+='<li><img src='+ +' id='++'></li>'
 })

 demo=str+str //Copy this set of pictures to achieve seamless visual effects _ul.innerHTML = demo 
 (_ul)

 var myWay = setInterval(function(){calData(_ul)}, ) //Timer
 function calData(element){
   = -()+'px'
  ++
  // (Why *120?) The total width of the picture (including margin) is 120px. When the first group of pictures just overflows the parent, the parent marginLeft is set to 0;  if( > *120 ) { 
   = 0;
  }
 }

  = function() {
  clearInterval(myWay)
 }

 = function() {
  myWay = setInterval(function(){calData(_ul)}, )
 }
 }

  = createImg

 }(window , document))

  = function() {
 new createImg(('slideScroll'))
 new createImg(('slideFast') ,{time:10})
 }