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判断CSS文件加载完毕的具体实现
Jan 17 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
JavaScript 事件入门知识
Apr 13 Javascript
JS判断字符串变量是否含有某个字串的实现方法
Jun 03 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
Aug 08 Javascript
JS实现给json数组动态赋值的方法示例
Mar 19 Javascript
Cocos2d实现刮刮卡效果
Dec 20 Javascript
vue实现在线翻译功能
Sep 27 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
javascript用defineProperty实现简单的双向绑定方法
Apr 03 Javascript
如何利用JavaScript实现二叉搜索树
Apr 02 Javascript
JavaScript声明变量和数据类型的转换
Apr 12 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 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
深入PHP内存相关的功能特性详解
2013/06/08 PHP
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
php中preg_match的isU代表什么意思
2015/10/01 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
玩转jQuery按钮 请告诉我你最喜欢哪些?
2012/01/08 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
JavaScript实现的石头剪刀布游戏源码分享
2014/08/22 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
2016/12/26 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
调试Python程序代码的几种方法总结
2015/04/28 Python
python 3.0 模拟用户登录功能并实现三次错误锁定
2017/11/01 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
pycharm导入源码的具体步骤
2020/08/04 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
祖国在我心中演讲稿500字
2014/05/04 职场文书
入党综合考察材料
2014/06/02 职场文书
安全生产宣传标语
2014/06/06 职场文书
企业法人代表任命书
2014/06/06 职场文书
图书室标语
2014/06/21 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
2014年市场部工作总结
2014/11/25 职场文书