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 相关文章推荐
浅析Prototype的模板类 Template
Dec 07 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
浅析JavaScript中两种类型的全局对象/函数
Dec 05 Javascript
常用的几段javascript代码分享
Mar 25 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
Sep 04 Javascript
js实现无限级树形导航列表效果代码
Sep 23 Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
Mar 10 Javascript
VUE长按事件需求详解
Oct 18 Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 Javascript
Vue props 单向数据流的实现
Nov 06 Javascript
详解Vue中使用Axios拦截器
Apr 22 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调用数据库的存贮过程!
2006/10/09 PHP
那些年一起学习的PHP(二)
2012/03/21 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
ASP中进行HTML数据及JS数据编码函数
2009/11/11 Javascript
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
2018/01/16 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
Python实现一个简单的验证码程序
2017/11/03 Python
Python列表list排列组合操作示例
2018/12/18 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
Python如何调用外部系统命令
2019/08/07 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
幼儿园老师辞职信
2014/01/20 职场文书
初中三好学生自我鉴定
2014/04/07 职场文书
幼儿园的门卫岗位职责
2014/04/10 职场文书
铁路安全事故反思
2014/04/26 职场文书
春节超市活动方案
2014/08/14 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
2014年专项整治工作总结
2014/11/17 职场文书
电力培训学习心得体会
2016/01/11 职场文书
JavaScript 与 TypeScript之间的联系
2021/11/27 Javascript
vscode内网访问服务器的方法
2022/06/28 Servers