js图片无缝滚动插件_js 图片滚动插件-CSDN博客

博客提及了信息技术领域的HTML、CSS和JS，它们是前端开发的重要技术，HTML用于构建网页结构，CSS负责页面样式，JS可实现页面交互等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css

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 id="slideScroll"></div>
 <div id="slideFast"></div>

;(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+' id='+item.id+'></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})
     }