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

前端  /  管理员 发布于 5年前   436

本文实例为大家分享了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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• JS图片无缝、平滑滚动代码
• js实现图片无缝滚动特效
• 用js实现的一个Flash滚动轮换显示图片代码生成器
• div+css布局的图片连续滚动js实现代码
• js jquery做的图片连续滚动代码
• JS实现图片横向滚动效果示例代码
• JS实现div内部的文字或图片自动循环滚动代码
• JavaScript代码实现图片循环滚动效果
• jcarousellite.js 基于Jquery的图片无缝滚动插件
• javascript实现图片左右滚动效果【可自动滚动，有左右按钮】