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 相关文章推荐
提高网站性能之 如何对待JavaScript
Oct 31 Javascript
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
微信小程序自动客服功能
Nov 02 Javascript
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
在vue-cli 3中给stylus、sass样式传入共享的全局变量
Aug 12 Javascript
解决layui laydate 时间控件一闪而过的问题
Sep 28 Javascript
vue v-for直接循环数字实例
Nov 07 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
Jun 29 Javascript
Vue3中的Refs和Ref详情
Nov 11 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
mysql 字段类型说明
2007/04/27 PHP
模板引擎正则表达式调试小技巧
2011/07/20 PHP
PHP的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
CI框架安全类Security.php源码分析
2014/11/04 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
PHP获取指定日期是星期几的实现方法
2016/11/30 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
javascript 得到变量类型的函数
2010/05/19 Javascript
JavaScript实现的石头剪刀布游戏源码分享
2014/08/22 Javascript
JavaScript获取表单内所有元素值的方法
2015/04/02 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
JavaScript判断日期时间差的实例代码
2018/03/01 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
python进阶教程之异常处理
2014/08/30 Python
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
python单线程文件传输的实例(C/S)
2019/02/13 Python
详解Python循环作用域与闭包
2019/03/21 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
python获取Linux发行版名称
2019/08/30 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
ECHT官方网站:男女健身服
2020/02/14 全球购物
加拿大领先家居家具网上购物:Aosom.ca
2020/05/27 全球购物
三年级学生评语
2014/04/23 职场文书
带香烟到学校抽的检讨书
2014/09/25 职场文书
专升本学生毕业自我鉴定
2014/10/04 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书