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 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
Apr 07 Javascript
浅谈javascript的Touch事件
Sep 27 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
Mar 06 Javascript
JS传参及动态修改页面布局
Apr 13 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 Javascript
微信小程序实现美团菜单
Jun 06 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
Aug 27 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
Oct 16 Javascript
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 Javascript
JS ES6异步解决方案
Apr 29 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中的file_get_contents获取远程页面乱码的问题
2013/06/25 PHP
php导入导出excel实例
2013/10/25 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
php文件上传类完整实例
2016/05/14 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
js 判断图片是否加载完以及实现图片的预下载
2014/08/14 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
Jquery结合HTML5实现文件上传
2015/06/25 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
关于单文件组件.vue的使用
2018/09/20 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
vant组件中 dialog的确认按钮的回调事件操作
2020/11/04 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
Pandas时间序列基础详解(转换,索引,切片)
2020/02/26 Python
python 实现多维数组(array)排序
2020/02/28 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
车间安全生产标语
2014/06/06 职场文书
征用土地赔偿协议书
2014/09/26 职场文书
我的1919观后感
2015/06/03 职场文书
2016高考寄语或鼓励的话语
2015/12/04 职场文书
安全责任协议书范本
2016/03/23 职场文书
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang