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网页画板(Graphics)类简介及实现代码
Dec 24 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
Nov 12 Javascript
jQuery的:parent选择器定义和用法
Jul 01 Javascript
IScroll5 中文API参数说明和调用方法
May 21 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
Sep 04 Javascript
微信小程序实现订单倒计时
Nov 01 Javascript
JavaScript实现像雪花一样的Hexaflake分形
Jul 07 Javascript
在vue中嵌入外部网站的实现
Nov 13 Javascript
详解Vue slot插槽
Nov 20 Vue.js
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
超神学院:鹤熙已踏入神圣领域,实力不比凯莎弱
2020/03/02 国漫
php仿ZOL分页类代码
2008/10/02 PHP
php+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
PHP检查文件是否存在,不存在自动创建及读取文件内容操作示例
2020/01/23 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
js模拟点击以提交表单为例兼容主流浏览器
2013/11/29 Javascript
浅谈javascript 迭代方法
2015/01/21 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
Angular获取手机验证码实现移动端登录注册功能
2017/05/17 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
Python实现TCP协议下的端口映射功能的脚本程序示例
2016/06/14 Python
python中的随机函数random的用法示例
2018/01/27 Python
Python3使用正则表达式爬取内涵段子示例
2018/04/22 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
Python3.5 处理文本txt,删除不需要的行方法
2018/12/10 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
django 环境变量配置过程详解
2019/08/06 Python
优秀中专生推荐信
2013/11/17 职场文书
教师实习自我鉴定
2013/12/18 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
舞出我人生观后感
2015/06/16 职场文书
德能勤绩工作总结
2015/08/11 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书
六年级作文之自救
2019/12/19 职场文书
多表查询、事务、DCL
2021/04/05 MySQL