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 $.ajax入门应用二
Nov 19 Javascript
jquery ajax提交表单数据的两种实现方法
Apr 29 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
Oct 05 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
Sep 28 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
将RGB值转换为灰度值的简单算法
Oct 09 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
Nov 01 Javascript
VUE 单页面使用 echart 窗口变化时的用法
Jul 30 Javascript
vue使用element-ui实现表单验证
Dec 13 Vue.js
JavaScript canvas实现跟随鼠标移动小球
Feb 09 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
Syphon 使用方法
2021/03/03 冲泡冲煮
PHP 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
PHP pathinfo()获得文件的路径、名称等信息说明
2011/09/13 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
javascript 动态加载 css 方法总结
2009/07/11 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
sso跨域写cookie的一段js脚本(推荐)
2016/05/25 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
解决webpack -p压缩打包react报语法错误的方法
2017/07/03 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
2018/06/19 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
2018/06/26 Javascript
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
微信小程序实现倒计时功能
2020/11/19 Javascript
如何使用python爬取csdn博客访问量
2016/02/14 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
python实现五子棋游戏
2019/06/18 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
python中rb含义理解
2020/06/18 Python
css3针对移动端卡顿问题的解决(动画性能优化)
2020/02/14 HTML / CSS
玖熙女鞋美国官网:Nine West
2016/10/06 全球购物
英国家庭和商业健身器材购物网站:Fitness Options
2018/07/05 全球购物
社区志愿者心得体会
2014/01/03 职场文书
课内比教学心得体会
2014/09/09 职场文书
学生评语集锦
2015/01/04 职场文书
期末复习计划
2015/01/19 职场文书
护士自荐信怎么写
2015/03/06 职场文书
《我的长生果》教学反思
2016/02/20 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js