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 相关文章推荐
jQuery编写widget的一些技巧分享
Oct 28 Javascript
Javascript setInterval的两种调用方法(实例讲解)
Nov 29 Javascript
向JavaScript的数组中添加元素的方法小结
Oct 24 Javascript
javaScript语法总结
Nov 25 Javascript
详解Vue用axios发送post请求自动set cookie
May 10 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
浅谈node的事件机制
Oct 09 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
简单介绍react redux的中间件的使用
Apr 06 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 Javascript
Vue快速实现通用表单验证的方法
Feb 24 Javascript
JS监听组合按键思路及实现过程
Apr 17 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采集时被封ip的解决方法
2010/08/29 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(九)
2014/06/24 PHP
php实现事件监听与触发的方法
2014/11/21 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
PHP实现对png图像进行缩放的方法(支持透明背景)
2015/07/15 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
PHP实现支付宝即时到账功能
2016/12/21 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
js控制表单操作的常用代码小结
2013/08/15 Javascript
javascript实现下拉提示选择框
2015/12/29 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
微信小程序 wxapp视图容器 view详解
2016/10/31 Javascript
jQuery点击头像上传并预览图片
2017/02/23 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
自定义事件解决重复请求BUG的问题
2017/07/11 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
浅谈vuex中store的命名空间
2019/11/08 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
使用vant的地域控件追加全部选项
2020/11/03 Javascript
跟老齐学Python之用Python计算
2014/09/12 Python
Python中__init__.py文件的作用详解
2016/09/18 Python
python使用SMTP发送qq或sina邮件
2017/10/21 Python
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
python操作kafka实践的示例代码
2019/06/19 Python
python自定义时钟类、定时任务类
2021/02/22 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
Python 串口通信的实现
2020/09/29 Python
python跨文件使用全局变量的实现
2020/11/17 Python
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
2020/04/07 HTML / CSS
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
毕业生求职自荐书范文
2014/03/27 职场文书
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis