快捷導(dǎo)航

js圖片無縫滾動插件使用詳解

更新時間：2020年05月26日 11:41:19 作者：saluteNic_LU

這篇文章主要為大家詳細(xì)介紹了js圖片無縫滾動插件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js圖片無縫滾動插件的具體代碼，供大家參考，具體內(nèi)容如下

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) 方法用于將所有可枚舉屬性的值從一個或多個源對象復(fù)制到目標(biāo)對象 。 返回目標(biāo)對象。
 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 //復(fù)制該組圖片以達(dá)到無縫連接的視覺效果
 _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 , 當(dāng)?shù)谝唤M圖片剛好溢出父級時 , 父級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})
 }

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: