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


Posted in Javascript onMay 26, 2020

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[JS]点出统计器
Oct 11 Javascript
JavaScript 动态将数字金额转化为中文大写金额
May 14 Javascript
W3C Group的JavaScript1.8 新特性介绍
May 19 Javascript
JavaScript 学习初步 入门教程
Mar 25 Javascript
用jquery实现点击栏目背景色改变
Dec 10 Javascript
JQuery限制复选框checkbox可选中个数的方法
Apr 20 Javascript
JavaScript学习笔记之DOM基础 2.4
Aug 14 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
常用的js验证和数据处理总结
Aug 02 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
深入了解JavaScript 的 WebAssembly
Jun 15 Javascript
Vue实现base64编码图片间的切换功能
Dec 04 Javascript
vue中datepicker的使用教程实例代码详解
Jul 08 #Javascript
微信小程序实现类似微信点击语音播放效果
Mar 30 #Javascript
微信小程序如何访问公众号文章
Jul 08 #Javascript
JavaScript实现的开关灯泡点击切换特效示例
Jul 08 #Javascript
JavaScript实现的联动菜单特效示例
Jul 08 #Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 #Javascript
JavaScript定时器设置、使用与倒计时案例详解
Jul 08 #Javascript
You might like
浅谈PHP中静态方法和非静态方法的相互调用
2016/10/04 PHP
PHP编程计算文件或数组中单词出现频率的方法
2017/05/22 PHP
从新浪弄下来的全屏广告代码 与使用说明
2007/03/15 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
js创建对象的区别示例介绍
2014/07/24 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
jQuery实现两款有动画功能的导航菜单代码
2015/09/16 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
js接收并转化Java中的数组对象的方法
2016/08/11 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
angular2 ng build部署后base文件路径问题详细解答
2017/07/15 Javascript
详解react使用react-bootstrap当轮子造车
2017/08/15 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
python 七种邮件内容发送方法实例
2014/04/22 Python
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
Python 中Pickle库的使用详解
2018/02/24 Python
Django Admin实现三级联动的示例代码(省市区)
2018/06/22 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
python实现图片素描效果
2020/09/26 Python
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
Bitiba意大利:在线宠物商店
2020/10/31 全球购物
外贸采购员求职的自我评价
2013/11/26 职场文书
更夫岗位责任制
2014/02/11 职场文书
警示教育活动总结
2014/05/05 职场文书
2014年行政助理工作总结
2014/11/19 职场文书
寒山寺导游词
2015/02/03 职场文书
2015年教师节活动总结
2015/03/20 职场文书
汽车4S店销售经理岗位职责
2015/04/02 职场文书