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%; }
html
<div></div> <div></div>
js
;(function(window , document) { function createImg(ele , opt) { var def = { arrImg: [ {src:'../img/LOGO.png' , id:'0'}, {src:'../img/zu.png' , id:'1'}, {src:'../img/zu.png' , id:'2'}, {src:'../img/zu.png' , id:'3'}, {src:'../img/zu.png' , id:'4'}, ] , currentData: 0, time: 50 //滑动速度 } //为ele添加css样式 ele.style.width = '240px'; ele.style.height = '120px'; ele.style.overflow = 'hidden'; ele.style.border = '1px solid #eee'; ele.style.boxShadow = '0 0 8px 2px #eee'; ele.style.position = 'relative'; //Object.assign(target , source) 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象 。 返回目标对象。 var obj = Object.assign(def , opt), _ul = document.createElement('ul'), str = '', demo _ul.setAttribute('class' , 'slide-img-ul') obj.arrImg.map((item , index) => { str+='<li><img src='+ item.src+'></li>' }) demo=str+str //复制该组图片以达到无缝连接的视觉效果 _ul.innerHTML = demo ele.appendChild(_ul) var myWay = setInterval(function(){calData(_ul)}, obj.time) //定时器 function calData(element){ element.style.marginLeft = -(obj.currentData)+'px' obj.currentData++ //（为什么*120 ？）图片总宽度（包括margin）为120px , 当第一组图片刚好溢出父级时 , 父级marginLeft置0; if(obj.currentData > obj.arrImg.length*120 ) { obj.currentData = 0; } } ele.onmouseover = function() { clearInterval(myWay) } ele.onmouseout= function() { myWay = setInterval(function(){calData(_ul)}, obj.time) } } window.createImg = createImg }(window , document)) window.onload = function() { new createImg(document.getElementById('slideScroll')) new createImg(document.getElementById('slideFast') ,{time:10}) }