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的递归之递归与循环示例介绍
Aug 05 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
Jul 20 Javascript
原生JS上传大文件显示进度条 php上传文件代码
Mar 27 Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 Javascript
详解关于vue-area-linkage走过的坑
Jun 27 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 Javascript
Element InputNumber计数器的使用方法
Jul 27 Javascript
小程序实现侧滑删除功能
Jun 25 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笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
jquery 操作表格实现代码(多种操作打包)
2011/03/20 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
jQuery实现购物车数字加减效果
2015/03/14 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
Jquery鼠标放上去显示全名的实现方法
2017/02/06 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
2017/03/07 Javascript
Vue开发中整合axios的文件整理
2017/04/29 Javascript
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
微信小程序动画(Animation)的实现及执行步骤
2018/10/28 Javascript
Vue 实现前端权限控制的示例代码
2019/07/09 Javascript
Python字典操作详细介绍及字典内建方法分享
2018/01/04 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
python3安装crypto出错及解决方法
2019/07/30 Python
python 哈希表实现简单python字典代码实例
2019/09/27 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
意大利男装网店:Vrients
2019/05/02 全球购物
打架检讨书400字
2014/01/17 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
幼儿园中秋节活动总结
2015/03/23 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书
《我和小伙伴》教学反思
2016/02/20 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书
Python制作动态字符画的源码
2021/08/04 Python
SQL Server Agent 服务无法启动
2022/04/20 SQL Server