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实现div浮动层跟随页面滚动效果
Feb 11 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
Jun 26 Javascript
浅析webapp框架AngularUI的demo
Dec 21 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
浅谈Javascript的静态属性和原型属性
May 07 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 Javascript
浅析为什么a="abc" 不等于 a=new String("abc")
Oct 25 Javascript
vue实现pdf文档在线预览功能
Nov 26 Javascript
基于jQuery实现可编辑的表格
Dec 11 jQuery
JavaScript 生成唯一ID的几种方式
Feb 19 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
第六节 访问属性和方法 [6]
2006/10/09 PHP
php mysql索引问题
2008/06/07 PHP
php学习之简单计算器实现代码
2011/06/09 PHP
php对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
2014/02/12 Javascript
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
2015/08/26 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
2016/05/17 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
跟老齐学Python之网站的结构
2014/10/24 Python
在Django框架中编写Context处理器的方法
2015/07/20 Python
python黑魔法之编码转换
2016/01/25 Python
python将字典内容存入mysql实例代码
2018/01/18 Python
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2018/03/15 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
thinkphp5 路由分发原理
2021/03/18 PHP
美国知名的隐形眼镜电商:Contacts America
2019/11/19 全球购物
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
员工培训邀请函
2014/01/11 职场文书
海南地接欢迎词
2014/01/14 职场文书
生物科学专业职业规划书范文
2014/02/11 职场文书
竞选部门副经理的自荐书范文
2014/02/11 职场文书
《问银河》教学反思
2014/02/19 职场文书
党员承诺书范文
2014/05/19 职场文书
求职信模板
2014/05/23 职场文书
雨雪天气温馨提示
2015/07/15 职场文书
幼儿园毕业典礼家长致辞
2015/07/29 职场文书
SQLServer RANK() 排名函数的使用
2022/03/23 SQL Server