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 相关文章推荐
Js 中debug方式
Feb 07 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
jQuery基于当前元素进行下一步的遍历
May 20 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 Javascript
基于JavaScript中标识符的命名规则介绍
Jan 06 Javascript
在Vue中使用echarts的方法
Feb 05 Javascript
全站最详细的Vuex教程
Apr 13 Javascript
elementUI中Table表格问题的解决方法
Dec 04 Javascript
在Vue项目中,防止页面被缩放和放大示例
Oct 28 Javascript
JS highcharts动态柱状图原理及实现
Oct 16 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的header和asp中的redirect比较
2006/10/09 PHP
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
smarty内置函数section的用法
2015/01/22 PHP
iOS10推送通知开发教程
2016/09/19 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
php合并数组并保留键值的实现方法
2018/03/12 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
关于图片的预加载过程中隐藏未知的
2012/12/19 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
jQuery each函数源码分析
2016/05/25 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
AngularJS ui-router (嵌套路由)实例
2017/03/10 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
javascript中可能用得到的全部的排序算法
2020/03/05 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
2020/07/20 Javascript
python小技巧之批量抓取美女图片
2014/06/06 Python
Python开发SQLite3数据库相关操作详解【连接,查询,插入,更新,删除,关闭等】
2017/07/27 Python
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
Python自带的IDE在哪里
2020/07/01 Python
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
大学生社会实践自我鉴定
2014/03/24 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
2015年党建工作总结
2015/03/30 职场文书
通知范文怎么写
2015/04/16 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers
MySQL系列之六 用户与授权
2021/07/02 MySQL
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技