您的位置：首页 > Web前端 > JavaScript

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

2019-07-09 08:33 1301 查看

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

;(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})
}

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

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js 图片滚动

相关文章推荐

新的分享

章节导航