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 相关文章推荐
纯CSS打造的导航菜单(附jquery版)
Aug 07 Javascript
jquery offset函数应用实例
Nov 14 Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
JS给Textarea文本框添加行号的方法
Aug 20 Javascript
AngularJS 避繁就简的路由
Jul 01 Javascript
超详细的JS弹出窗口代码大全
Apr 18 Javascript
在js中实现邮箱格式的验证方法(推荐)
Oct 24 Javascript
基于angular实现模拟微信小程序swiper组件
Jun 11 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
Jun 25 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
JavaScript截屏功能的实现代码
Jul 28 Javascript
基于JavaScript实现随机点名器
Feb 25 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 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
php的字符串用法小结
2010/06/08 PHP
php 启动报错如何解决
2014/01/17 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
javascript中的缓动效果实现程序
2012/12/29 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
js控制输入框获得和失去焦点时状态显示的方法
2015/01/30 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
node.JS二进制操作模块buffer对象使用方法详解
2020/02/06 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
python 检查文件mime类型的方法
2018/12/08 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
pytorch实现mnist分类的示例讲解
2020/01/10 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
美国肌肉和力量商店:Muscle & Strength
2019/06/22 全球购物
公司保密承诺书
2014/03/27 职场文书
社区维稳工作方案
2014/06/06 职场文书
合作经营协议书范本
2014/09/16 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
实施意见格式范本
2015/06/05 职场文书
学习新党章心得体会2016
2016/01/15 职场文书
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python