文件名称:carousel-slide:JQuery面向对象实现无限轮播组件
文件大小:40KB
文件格式:ZIP
更新时间:2024-05-20 11:29:51
JavaScript
无限轮播组件 面向对象方法实现无限轮播组件 实现功能 自动轮播 左右按钮点击切换上一张、下一张 底部状态随轮播索引变化 鼠标移入/移除,轮播停止/继续 实现思路 面向对象方法编程 初始化 绑定事件 为事件添加方法 调用 难点 该组件为无限轮播组件,CSS把图片并排,当向左滚动到最后一张或向右滚动到第一张时,继续滚动显示空白图片。 解决方法 使用JS在第一张图片前添加最后一张图片,在最后一张图片后添加第一张图片。 this.$imgCt.append(this.$imgs.first().clone()) this.$imgCt.prepend(this.$imgs.last().clone()) this.$imgCt.width((this.imgCount + 2) * this.imgWidth) this.$imgCt.css('left', -this.imgWidth) 向左滚
【文件预览】:
carousel-slide-master
----index.html(2KB)
----images()
--------3.png(9KB)
--------1.png(12KB)
--------2.png(7KB)
--------0.png(8KB)
----js()
--------carousel.js(3KB)
----README.md(2KB)
----css()
--------style.css(1KB)