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 For Beginners(转载)
Jan 05 Javascript
简单选项卡 js和jquery制作方法分享
Feb 26 Javascript
创建你的第一个AngularJS应用的方法
Jun 16 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
js仿微信语音播放实现思路
Dec 12 Javascript
微信小程序canvas写字板效果及实例
Jun 15 Javascript
自定义事件解决重复请求BUG的问题
Jul 11 Javascript
vue.js单文件组件中非父子组件的传值实例
Sep 13 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 Javascript
JavaScript实现无限级递归树的示例代码
Mar 29 Javascript
angularjs请求数据的方法示例
Aug 06 Javascript
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
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编程最快明白》第七讲:php图片验证码与缩略图
2010/11/01 PHP
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
PHP socket 模拟POST 请求实例代码
2016/07/18 PHP
iOS10推送通知开发教程
2016/09/19 PHP
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
2012/10/11 Javascript
js jquery获取随机生成id的服务器控件的三种方法
2013/07/11 Javascript
js确认删除对话框效果的示例代码
2014/02/20 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
js格式化时间的简单实例
2016/11/27 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
微信小程序中form 表单提交和取值实例详解
2017/04/20 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
2017/09/22 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
2018/09/15 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python批量生成本地ip地址的方法
2015/03/23 Python
Python如何发布程序的详细教程
2018/10/09 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
Python3利用print输出带颜色的彩色字体示例代码
2019/04/08 Python
Python常见数据类型转换操作示例
2019/05/08 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
CSS3实现div从下往上滑入滑出效果示例
2020/04/28 HTML / CSS
智能旅行箱:Horizn Studios
2018/04/30 全球购物
Windows和Linux动态库应用异同
2016/04/17 面试题
幼儿园毕业教师感言
2014/02/21 职场文书
大学军训感言1500字
2014/03/09 职场文书
小学教师寄语大全
2014/04/03 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
公司保洁员管理制度
2015/08/04 职场文书
Mysql多层子查询示例代码(收藏夹案例)
2022/03/31 MySQL