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 parseInt 大改造
Sep 27 Javascript
JavaScript 事件记录使用说明
Oct 20 Javascript
js获取客户端外网ip的简单实例
Nov 21 Javascript
Jquery对象和Dom对象的区别分析
Nov 20 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
Apr 16 Javascript
jQuery根据元素值删除数组元素的方法
Jun 24 Javascript
JavaScript如何自定义trim方法
Jul 28 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
Angularjs实现分页和分页算法的示例代码
Dec 23 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
Dec 05 Javascript
uniapp开发小程序的经验总结
Apr 08 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 邮件发送问题解决
2014/03/22 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
php简单计算页面加载时间的方法
2015/06/19 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
jQuery根据ID、CLASS、等获取对象的实例
2016/12/04 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
javascript实现简易的计算器
2020/01/17 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
python与C互相调用的方法详解
2017/07/14 Python
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
python3实现windows下同名进程监控
2018/06/21 Python
python实现一个函数版的名片管理系统过程解析
2019/08/27 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
iPython pylab模式启动方式
2020/04/24 Python
使用Python pip怎么升级pip
2020/08/11 Python
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
应用艺术专业个人的自我评价
2014/01/03 职场文书
统计系教授推荐信
2014/02/28 职场文书
谢师宴邀请函
2015/02/02 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
学生病假条范文
2015/08/17 职场文书
2015年十月一日放假通知
2015/08/18 职场文书