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显示选择目录对话框的代码
Nov 10 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
Mar 29 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
Dec 17 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
js简单正则验证汉字英文及下划线的方法
Nov 28 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
Vue实现本地购物车功能
Dec 05 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 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
个人站长制做网页常用的php代码
2007/03/03 PHP
PHP与SQL注入攻击[二]
2007/04/17 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
解析jquery中的ajax缓存问题
2013/12/19 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
2015/08/07 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
ES6生成器用法实例分析
2017/04/10 Javascript
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
taro小程序添加骨架屏的实现代码
2019/11/15 Javascript
Vue实现购物车基本功能
2020/11/08 Javascript
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
python 并发编程 非阻塞IO模型原理解析
2019/08/20 Python
Python求解正态分布置信区间教程
2019/11/20 Python
python输出pdf文档的实例
2020/02/13 Python
python图片合成的示例
2020/11/09 Python
Python扫描端口的实现
2021/01/25 Python
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
Anya Hindmarch官网:奢侈设计师手袋及配饰
2018/11/15 全球购物
校长就职演讲稿
2014/01/06 职场文书
村主任群众路线个人对照检查材料
2014/09/26 职场文书
2014年行政部工作总结
2014/11/19 职场文书
2015新员工试用期工作总结
2014/12/12 职场文书
总账会计岗位职责
2015/04/02 职场文书
解读MySQL的客户端和服务端协议
2021/05/10 MySQL
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis
详解Python中下划线的5种含义
2021/07/15 Python