亲宝软件园·资讯

展开

js图片无缝滚动插件使用详解

saluteNic_LU 人气:2

本文实例为大家分享了js图片无缝滚动插件的具体代码,供大家参考,具体内容如下

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>

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+' 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})
  }

加载全部内容

相关教程
猜你喜欢
用户评论