`
ghyghoo8
  • 浏览: 193153 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

一个轮播滚动的js

    博客分类:
  • js
阅读更多
下午,应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带按钮的九宫格图片轮播滚动代码

    在JavaScript编程领域,"js带按钮的九宫格图片轮播滚动代码"是一个常见的应用场景,主要涉及网页动态展示和交互设计。这样的功能通常用于产品展示、图像广告或用户界面的创新设计。以下将详细讲解这一知识点的相关...

    文字上下轮播滚动,纯js实现,结构简单明了

    文字上下轮播滚动,纯js实现,结构简单明了,几行代码即可

    JS实现页面图片轮播滚动效果

    jQuery是一个强大的JavaScript库,简化了DOM操作、事件处理和Ajax交互。在实现轮播效果时,我们可以利用jQuery提供的便利方法,如`.fadeOut()`、`.fadeIn()`来实现图片的渐隐渐现切换。 2. `jquery-1.32pack.js`:这...

    vue移动端轮播图(触摸滑动滚动、自动轮播、无缝滚动、循环无回滚)

    Vue.js是一个轻量级的前端框架,它采用声明式编程方式,使得开发者能够更加专注于数据和逻辑,而不是DOM操作。在Vue中,我们可以使用模板语法来构建UI,同时利用组件化开发提高代码复用性和可维护性。 接着,我们来...

    js轮播无缝滚动

    以下是一个简单的JS轮播无缝滚动的示例: ```javascript // 初始化数据 var items = document.querySelectorAll('.carousel-item'); var currentIndex = 0; var carousel = document.querySelector('.carousel'); ...

    jQuery新闻图片上下轮播滚动代码

    1. **jQuery库**:jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画和Ajax交互。在实现轮播滚动时,jQuery的高效性能和丰富的API是关键。 2. **定时器(setTimeout或setInterval)**:用于设置...

    zencart随机产品轮播滚动

    "Zencart随机产品轮播滚动"是Zencart系统中的一个功能模块,旨在提升用户体验,增加产品页面的吸引力,同时提高产品的曝光率和点击率。这个模块将随机展示网站上的产品,形成一种动态轮播的效果,使得首页或产品页面...

    图片弧形展示轮播切换js代码

    【图片弧形展示轮播切换js代码】是一个用于创建独特视觉体验的JavaScript插件,它专为网站设计,提供了一种吸引用户注意力的方式。这款特效代码使得图片以弧形排列并进行轮播切换,增加了网站的动态感和交互性。在...

    简单的轮播滚动

    在本案例中,我们讨论的是一个简单的轮播滚动实现,具有淡入淡出效果,支持用户通过点击按钮或数字进行切换,并具备自动切换功能。 首先,让我们深入了解淡入淡出效果。这种效果通常是通过CSS3的透明度属性`opacity...

    原生JS实现无缝滚动轮播图

    本教程将深入探讨如何使用原生JavaScript(JS)实现一个无缝滚动轮播图,无需依赖任何外部库,如jQuery或其他轮播插件。 首先,我们需要创建HTML结构。一个简单的轮播图通常包含一个容器div,以及若干个用于展示...

    web前端自动滚动且点击切换轮播图代码

    通常会有一个JavaScript文件(如`script.js`),其中包含轮播图的逻辑代码,包括初始化轮播图、设置自动滚动、添加点击事件监听器等功能。此文件可能需要引入到`demo.html`中,通过`<script>`标签实现。 7. **优化...

    jQuery支持手机端图片列表轮播滚动代码

    "jQuery支持手机端图片列表轮播滚动代码"是一个专为移动端设计的jQuery插件,它旨在帮助开发者轻松实现图片轮播效果,使得用户可以在有限的屏幕空间内浏览多张图片。这个插件充分利用了jQuery的强大功能,结合手机...

    jquery焦点图片轮播滚动.rar

    标题中的“jquery焦点图片轮播滚动.rar”表明这是一个使用jQuery库实现的焦点图轮播效果的资源包。jQuery是一款广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互,使得创建复杂的网页动态...

    jQuery+swiper.js幻灯片图片视差滚动轮播特效

    jQuery是一个高效、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。jQuery的核心特性是通过链式操作和选择器使得JavaScript代码更易读、更简洁。在这个特效中,jQuery主要负责事件...

    jsp js 轮播图多行滚动

    6. **轮播图结构**:通常,轮播图由一个容器元素、多个图片元素和控制按钮(如左右箭头)组成。每个图片元素在初始状态下大部分是隐藏的,只有当前显示的图片是可见的。 7. **事件监听**:使用JavaScript的`...

    多张图片轮播 js+css

    总之,“多张图片轮播 js+css”是一个关于使用JavaScript和CSS创建动态图片轮播效果的实例,它涉及到网页交互设计、动态效果实现、用户界面优化等多个方面,对于网页设计师和前端开发者来说,这是一个实用且有价值的...

    简单的jquery四张图片轮播滚动切换效果代码

    本篇文章将深入探讨如何使用jQuery创建一个简单的四张图片轮播滚动切换效果。 首先,我们需要理解轮播的基本原理。图片轮播通常是通过定时改变显示的图片来实现的,同时提供手动切换选项,如左右箭头或导航点。在这...

    js文字向上滚动轮播

    支持文字向上滚动轮播,采用jquery动画,可以添加点击事件,并且可以轮播点击,如果有需要可以for循环去生成<li></li>,文字循环向上滚动,实现文字轮播。

    vue实现轮播图(滚动切换,无缝切换,自动切换,循环无回滚等)

    在Vue.js框架中实现轮播图功能,是一个常见的前端任务,尤其对于网页设计和用户体验至关重要。Vue轮播图可以提供动态、吸引人的展示方式,包括滚动切换、无缝切换、自动切换、循环无回滚以及暂停滚动等效果。下面将...

    通过css动画实现一个表格滚动轮播效果

    css动画的一个应用,与此前的css走马灯同样的内容。只是一次不同的应用,具体实现如下 序号 姓名 年龄 性别 专业 </ul>

Global site tag (gtag.js) - Google Analytics