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网页关闭时提醒效果脚本
Oct 22 Javascript
js操作iframe兼容各种主流浏览器示例代码
Jul 22 Javascript
微信企业号开发之微信考勤百度地图定位
Sep 11 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
JS功能代码集锦
May 04 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 Javascript
老生常谈js中的MVC
Jul 25 Javascript
ionic选择多张图片上传的示例代码
Oct 10 Javascript
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
用Axios Element实现全局的请求loading的方法
Mar 15 Javascript
使用uni-app开发微信小程序的实现
Dec 13 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
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
Thinkphp和onethink实现微信支付插件
2016/04/13 PHP
PHP运行模式汇总
2016/11/06 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
jquery实现当滑动到一定位置时固定效果
2014/06/17 Javascript
javascript常见操作汇总
2014/09/03 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
vue 弹框产生的滚动穿透问题的解决
2018/09/21 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
[42:11]TNC vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python遍历numpy数组的实例
2018/04/04 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
python实现各种插值法(数值分析)
2019/07/30 Python
django中使用POST方法获取POST数据
2019/08/20 Python
使用python实现多维数据降维操作
2020/02/24 Python
Python 如何对文件目录操作
2020/07/10 Python
新加坡最受追捧的体验平台:Hapz
2018/01/01 全球购物
在职人员函授期间自我评价分享
2013/11/08 职场文书
厨房工作人员岗位职责
2013/11/15 职场文书
社区爱国卫生月活动总结
2014/06/30 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
自愿离婚协议书范本
2015/01/26 职场文书
英语辞职信范文
2015/02/28 职场文书
英文投诉信格式
2015/07/03 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
2015年小学财务工作总结
2015/07/20 职场文书