JS简单的轮播的图片滚动实例


Posted in Javascript onJune 17, 2013

[javascript] 

var forimg = function (foritem, hoverStop, defaultfor) {  
        var _foritem = foritem.constructor == jQuery ? foritem : $(foritem);  
        var imgarr = [  
            { "z-index": 1, "width": 100, "height": 100, "left": 0, "top": "75px" },  
            { "z-index": 2, "width": 200, "height": 200, "left": 50, "top": "25px" },  
            { "z-index": 3, "width": 300, "height": 250, "left": 150, "top": "0" },  
            { "z-index": 2, "width": 200, "height": 200, "left": 370, "top": "25px" },  
            { "z-index": 1, "width": 100, "height": 100, "left": 520, "top": "75px" }  
        ];  
        _foritem.each(function (i) {  
            var _this = $(this);  
            _this.css(imgarr[i] || imgarr[4]);  
            _this.find("img").css(imgarr[i] || imgarr[4]);  
        });   3water.com
        var _for = function (_i, data, nulldata, callback) {  
            $(foritem).each(function (i) {  
                var self = $(this);  
                setTimeout(function () {  
                    self.css("z-index", (data[i + _i] || nulldata)["z-index"])  
                    self.stop().animate(data[i + _i] || nulldata);  
                    self.find("img").stop().animate(data[i + _i] || nulldata, function () {  
                        callback.call(self, i);  
                    });  
                });  
            });  
        };  
        var that = this;  
        var defaultforfun = function () {  
            if (!defaultfor) {  
                that.leftfor();  
            } else {  
                that.rightfor();  
            }  
        }  
        var forimgInterval = setInterval(defaultforfun, 1000);  
        if (hoverStop) {  
            _foritem.hover(function () {  
                clearInterval(forimgInterval);  
            }, function () {  
                forimgInterval = setInterval(defaultforfun, 1000);  
            });  
        }  
        this.leftfor = function () {  
            var nuldata = { "z-index": -1, "width": 100, "height": 100, "left": 520, "top": "75px" };  
            imgarr[0]["z-index"] = 1;  
            imgarr[0]["z-index"] = 2  
            imgarr[0]["z-index"] = 3  
            imgarr[0]["z-index"] = 2  
            imgarr[0]["z-index"] = 1  
            _for(-1, imgarr, nuldata, function (i) {  
                if (i == 0) {  
                    this.closest("ul").append(this);  
                }  
            });  
        };  
        this.rightfor = function () {  
            var nuldata = { "z-index": -1, "width": 100, "height": 100, "left": 0, "top": "75px" };  
            imgarr[0]["z-index"] = 1;  
            imgarr[0]["z-index"] = 2  
            imgarr[0]["z-index"] = 4  
            imgarr[0]["z-index"] = 5  
            imgarr[0]["z-index"] = 2  
            _for(1, imgarr, nuldata, function (i) {  
                if (i == _foritem.length - 1) {  
                    this.closest("ul").prepend(this);  
                    this.css("z-index", "1");  
                }  
            });  
        };  
        this.stop = function () {  
            clearInterval(forimgInterval);  
        };  
        this.next = function () {  
            forimgInterval = setInterval(defaultforfun, 1000);  
        };  
    }; 
Javascript 相关文章推荐
javascript获得服务器端控件的ID的实现代码
Dec 28 Javascript
js中直接声明一个对象的方法
Aug 10 Javascript
jQuery自动添加表单项的方法
Jul 13 Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 Javascript
详解Vue-cli 创建的项目如何跨域请求
May 18 Javascript
详解微信第三方小程序代开发
Jun 23 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
AngularJS 事件发布机制
Aug 28 Javascript
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
Vue 实现拨打电话操作
Nov 16 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 #Javascript
js模仿jquery的写法示例代码
Jun 16 #Javascript
$.getJSON在IE下失效的原因分析及解决方法
Jun 16 #Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 #Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 #Javascript
用js实现控件的隐藏及style.visibility的使用
Jun 14 #Javascript
JavaScript实现表格排序方法
Jun 14 #Javascript
You might like
Linux下实现PHP多进程的方法分享
2012/08/16 PHP
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
用倒置滤镜把div倒置,再把table倒置。
2007/07/31 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
JavaScript实现MIPS乘法模拟的方法
2015/04/17 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
浅析JavaScript Array和string的转换(推荐)
2016/05/20 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
2018/07/09 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
2020/02/19 Javascript
js实现轮播图特效
2020/05/28 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
用C++封装MySQL的API的教程
2015/05/06 Python
编写Python脚本把sqlAlchemy对象转换成dict的教程
2015/05/29 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
简单了解python模块概念
2018/01/11 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
python Elasticsearch索引建立和数据的上传详解
2019/08/04 Python
Python中断多重循环的几种方式详解
2020/02/10 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
2014年工人工作总结
2014/11/25 职场文书
2016教师节感恩话语
2015/12/09 职场文书