下午,应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);
分享到:
相关推荐
JS实现页面图片轮播滚动效果 JS实现页面图片轮播滚动效果 JS实现页面图片轮播滚动效果 JS实现页面图片轮播滚动效果 JS实现页面图片轮播滚动效果
js带按钮的九宫格图片轮播滚动代码
jsp js 轮播图多行滚动
js轮播无缝滚动
文字上下轮播滚动,纯js实现,结构简单明了,几行代码即可
基于vue实现移动端轮播图,主要功能手指触摸滑动滚动、自动轮播、无缝滚动、循环无回滚等。图片切换有过渡效果。适合前端初学者学习。欢迎有疑问的小伙伴私聊提问哦。
支持文字向上滚动轮播,采用jquery动画,可以添加点击事件,并且可以轮播点击,如果有需要可以for循环去生成<li></li>,文字循环向上滚动,实现文字轮播。
jquery焦点图片轮播滚动
原生JS实现无缝滚动轮播图,使用相对定位进行无缝滚动,五张图的轮播只需五张图
js+jquery实现无缝滚动轮播图,导航条可左右切换 , js+jquery实现无缝滚动轮播图,导航条可左右切换 ,
jQuery+swiper.js幻灯片图片视差滚动轮播特效,非常棒的一款带标签的jQuery图片视差切换代码。
原生js图片插件制作左右箭头按钮控制图片轮播滚动
实现效果: jQuery带分页单排文字上下轮播滚动代码,这样的效果我们可以应用到企业网站,或者商城网站,文字写成产品的信息,这样的一个效果,让网站也变的更加美观!
jQuery图片轮播滚动切换代码是一款简单的jquery四张图片轮播滚动切换效果代码。
解决图片轮播a连接无效问题,共享一份到网上,有需要的可以下载。里面包含图片滚动和图片轮播代码。纯javascript。
原生JS实现无缝滚动轮播图,最大的优点:使用相对定位进行无缝滚动,五张图的轮播只需五张图
JS实现无缝滚动轮播图,支持点击,有索引,自动轮播
swiper实现轮播图几乎是没有一点点技术含量,但是用起来却很方便,包括对移动端的支持也很好。 由于简单这里当然就不会去详细介绍了,下面就来开始本文的正文内容 实现过程: 一.移动端-需求swiper 4.0.3实现层叠轮播 ...
vue实现轮播图,实现滚动切换,无缝切换,自动切换,循环无回滚,暂停滚动等效果。适合初学者学习借鉴。对代码有疑问或者不懂的欢迎私信交流。
图片轮播滚动,含css,js,image。用js实现图片滚动效果