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 相关文章推荐
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
Nov 23 Javascript
前台js调用后台方法示例
Dec 02 Javascript
屏蔽相应键盘按钮操作
Mar 10 Javascript
JavaScript中的console.group()函数详细介绍
Dec 29 Javascript
使用jquery制作弹出框效果
Apr 03 Javascript
ES2015 Symbol 一种绝不重复的值
Dec 25 Javascript
从零学习node.js之详解异步控制工具async(八)
Feb 27 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
Angular如何引入第三方库的方法详解
Jul 13 Javascript
javascript匿名函数中的'return function()'作用
Oct 15 Javascript
微信小程序中data-key属性之数据传输(经验总结)
Aug 22 Javascript
vue打包时去掉所有的console.log
Apr 10 Vue.js
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
给海燕B411配件机起死回生配上件
2021/03/02 无线电
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
$.ajax json数据传递方法
2008/11/19 Javascript
IE和Firefox下javascript的兼容写法小结
2008/12/10 Javascript
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
Javascript 面向对象 命名空间
2010/05/13 Javascript
jQuery中调用WebService方法小结
2011/03/28 Javascript
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
JavaScript简单获取系统当前时间完整示例
2016/08/02 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
JavaScript的词法结构精华篇
2018/10/17 Javascript
微信小程序解除10个请求并发限制
2018/12/18 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
利用python库在局域网内传输文件的方法
2018/06/04 Python
Python对ElasticSearch获取数据及操作
2019/04/24 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
Form表单及django的form表单的补充
2019/07/25 Python
Python 没有main函数的原因
2020/07/10 Python
Django url 路由匹配过程详解
2021/01/22 Python
英国皇室御用百货:福南梅森(Fortnum & Mason)
2017/12/03 全球购物
美国领先的精品家居照明和装饰产品在线零售商:LightsOnline.com
2018/01/23 全球购物
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
物流管理专业大学生自荐信
2013/10/04 职场文书
工作时间上网检讨书
2014/02/03 职场文书
通信工程专业求职信
2014/06/04 职场文书
企业宣传标语
2014/06/09 职场文书
如何写股份合作协议书
2014/09/11 职场文书
任命书标准格式
2015/03/02 职场文书
军训后的感想
2015/08/07 职场文书
八年级历史教学反思
2016/02/19 职场文书
javaScript Array api梳理
2021/03/31 Javascript