下午,应PD需求,写了个轮播滚动的javascript。可以四个方向进行轮播。
一直在追求规范的代码书写和风格。
现阶段的水平,可能就是这样了。以此为始,继续精进。。。
求拍砖,万分荣幸。
废话不多说,贴代码:
(function(app) {
app.roll = function(list, opt) {
return new roll(list, opt);
};
function roll(list, opt) {
this.config = $.extend({}, roll.DEF, opt);
this.list = list.css(roll.ABL);
this.show = list.hide().eq(this.config.index).css(roll.BLOCK);
this.num = list.length;
//run
this.run();
}
/**
* 静态变量
*/
roll.DEF = {index:0,time:3000,speed:500,coord:"top"};
roll.BLOCK = {display:"block"};
roll.ABL = {position:"absolute"};
roll.REV = {position:"relative"};
roll.TURN = {top:0,bottom:1,left:2,right:3};
roll.CSS = {left:0,top:0};
/**
* 启动 计时
*/
roll.prototype.run = function() {
var _this = this,config = _this.config;
_this.init();
_this.interval = window.setInterval(function() {
var next = _this.list.eq(config.index + 1);
if (next.length) {
config.index += 1;
} else {
config.index = 0;
next = _this.list.eq(config.index);
}
_this.turnDown(_this.fixedLoc(next));
}, _this.config.time);
};
/**
* 初始化数据
*/
roll.prototype.init = function() {
var _this = this,config = _this.config,cssShow = {display:"block",left:0,top:0},down = {};
_this.show.parent().css(roll.REV);
switch (roll.TURN[config.coord]) {
case 0:cssShow.top = config["height"] = 0 - _this.show.height();break;
case 1:cssShow.top = config["height"] = _this.show.height();break;
case 2:cssShow.left = config["width"] = 0 - _this.show.width();break;
case 3:cssShow.left = config["width"] = _this.show.width();break;
default:throw new Error("error Param: coord");
}
this.cssShow = cssShow;
//设置 滚动方向======================
if (this.cssShow.left == 0) {
if (this.cssShow.top > 0) {
down.top = "+=" + Math.abs(this.cssShow.top) + "px"
} else {
down.top = "-=" + Math.abs(this.cssShow.top) + "px"
}
this.cssShow.top = 0 - this.cssShow.top;
} else {
if (this.cssShow.left > 0) {
down.left = "+=" + Math.abs(this.cssShow.left) + "px"
} else {
down.left = "-=" + Math.abs(this.cssShow.left) + "px"
}
this.cssShow.left = 0 - this.cssShow.left;
}
this.config.down = down;
};
/**
* 定位 nextUnit
*/
roll.prototype.fixedLoc = function (obj) {
var _this = this;
obj.css(_this.cssShow);
return obj;
};
/**
* 播放动画
*/
roll.prototype.turnDown = function (obj) {
var _this = this,config = _this.config;
_this.show.add(obj).animate(config.down, config.speed, function() {
_this.reset(obj);
});
};
/**
* 重置
*/
roll.prototype.reset = function (obj) {
var _this = this;
_this.list.hide();
_this.show = obj.css(roll.BLOCK);
};
})(window.App);
分享到:
相关推荐
在JavaScript编程领域,"js带按钮的九宫格图片轮播滚动代码"是一个常见的应用场景,主要涉及网页动态展示和交互设计。这样的功能通常用于产品展示、图像广告或用户界面的创新设计。以下将详细讲解这一知识点的相关...
文字上下轮播滚动,纯js实现,结构简单明了,几行代码即可
jQuery是一个强大的JavaScript库,简化了DOM操作、事件处理和Ajax交互。在实现轮播效果时,我们可以利用jQuery提供的便利方法,如`.fadeOut()`、`.fadeIn()`来实现图片的渐隐渐现切换。 2. `jquery-1.32pack.js`:这...
Vue.js是一个轻量级的前端框架,它采用声明式编程方式,使得开发者能够更加专注于数据和逻辑,而不是DOM操作。在Vue中,我们可以使用模板语法来构建UI,同时利用组件化开发提高代码复用性和可维护性。 接着,我们来...
以下是一个简单的JS轮播无缝滚动的示例: ```javascript // 初始化数据 var items = document.querySelectorAll('.carousel-item'); var currentIndex = 0; var carousel = document.querySelector('.carousel'); ...
1. **jQuery库**:jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画和Ajax交互。在实现轮播滚动时,jQuery的高效性能和丰富的API是关键。 2. **定时器(setTimeout或setInterval)**:用于设置...
"Zencart随机产品轮播滚动"是Zencart系统中的一个功能模块,旨在提升用户体验,增加产品页面的吸引力,同时提高产品的曝光率和点击率。这个模块将随机展示网站上的产品,形成一种动态轮播的效果,使得首页或产品页面...
在本案例中,我们讨论的是一个简单的轮播滚动实现,具有淡入淡出效果,支持用户通过点击按钮或数字进行切换,并具备自动切换功能。 首先,让我们深入了解淡入淡出效果。这种效果通常是通过CSS3的透明度属性`opacity...
本教程将深入探讨如何使用原生JavaScript(JS)实现一个无缝滚动轮播图,无需依赖任何外部库,如jQuery或其他轮播插件。 首先,我们需要创建HTML结构。一个简单的轮播图通常包含一个容器div,以及若干个用于展示...
【图片弧形展示轮播切换js代码】是一个用于创建独特视觉体验的JavaScript插件,它专为网站设计,提供了一种吸引用户注意力的方式。这款特效代码使得图片以弧形排列并进行轮播切换,增加了网站的动态感和交互性。在...
通常会有一个JavaScript文件(如`script.js`),其中包含轮播图的逻辑代码,包括初始化轮播图、设置自动滚动、添加点击事件监听器等功能。此文件可能需要引入到`demo.html`中,通过`<script>`标签实现。 7. **优化...
"jQuery支持手机端图片列表轮播滚动代码"是一个专为移动端设计的jQuery插件,它旨在帮助开发者轻松实现图片轮播效果,使得用户可以在有限的屏幕空间内浏览多张图片。这个插件充分利用了jQuery的强大功能,结合手机...
标题中的“jquery焦点图片轮播滚动.rar”表明这是一个使用jQuery库实现的焦点图轮播效果的资源包。jQuery是一款广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互,使得创建复杂的网页动态...
jQuery是一个高效、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。jQuery的核心特性是通过链式操作和选择器使得JavaScript代码更易读、更简洁。在这个特效中,jQuery主要负责事件...
6. **轮播图结构**:通常,轮播图由一个容器元素、多个图片元素和控制按钮(如左右箭头)组成。每个图片元素在初始状态下大部分是隐藏的,只有当前显示的图片是可见的。 7. **事件监听**:使用JavaScript的`...
总之,“多张图片轮播 js+css”是一个关于使用JavaScript和CSS创建动态图片轮播效果的实例,它涉及到网页交互设计、动态效果实现、用户界面优化等多个方面,对于网页设计师和前端开发者来说,这是一个实用且有价值的...
本篇文章将深入探讨如何使用jQuery创建一个简单的四张图片轮播滚动切换效果。 首先,我们需要理解轮播的基本原理。图片轮播通常是通过定时改变显示的图片来实现的,同时提供手动切换选项,如左右箭头或导航点。在这...
支持文字向上滚动轮播,采用jquery动画,可以添加点击事件,并且可以轮播点击,如果有需要可以for循环去生成<li></li>,文字循环向上滚动,实现文字轮播。
css动画的一个应用,与此前的css走马灯同样的内容。只是一次不同的应用,具体实现如下 序号 姓名 年龄 性别 专业 </ul>
标题中的“jquery焦点图片轮播滚动类似选项卡滑动切换”指的是使用jQuery库来实现一种常见的网页交互功能,即图片轮播。这种效果通常在网站的首页或产品展示区域使用,能够吸引用户的注意力并展示多张图片或内容,而...