JS简单的轮播的图片滚动实例

 更新时间:2013年06月17日 09:13:25   作者:  
JS简单的轮播的图片滚动实例,需要的朋友可以参考一下
[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]); 
        });   www.jb51.net
        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); 
        }; 
    }; 

相关文章

  • js实现简洁的TAB滑动门效果代码

    js实现简洁的TAB滑动门效果代码

    这篇文章主要介绍了js实现简洁的TAB滑动门效果代码,通过简单的JavaScript自定义函数动态遍历页面元素实现tab滑动切换的功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • Bootstrap栅格系统简单实现代码

    Bootstrap栅格系统简单实现代码

    这篇文章主要为大家详细介绍了Boostrap栅格系统的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • js中数组Array的一些常用方法总结

    js中数组Array的一些常用方法总结

    Array()是我们在js中常常写到的代码,今天就总结哈Array的对象具有哪些方法,感兴趣的朋友可以了解下
    2013-08-08
  • js展开闭合效果演示代码

    js展开闭合效果演示代码

    本文为大家介绍下js如何实现展开闭合效果,具体代码如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助
    2013-07-07
  • JS图片自动轮换效果实现思路附截图

    JS图片自动轮换效果实现思路附截图

    这篇文章主要介绍了JS实现的图片自动轮换效果,有具体的实现思路及截图,希望对大家学习有所帮助
    2014-04-04
  • js下判断 iframe 是否加载完成的完美方法

    js下判断 iframe 是否加载完成的完美方法

    一般来说,我们判断 iframe 是否加载完成其实与 判断JavaScript 文件是否加载完成。
    2010-10-10
  • JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)

    JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)

    这篇文章主要介绍了JavaScript Drum Kit 指南,也就是纯 JS 模拟敲鼓效果实现代码,需要的朋友可以参考下
    2017-07-07
  • PHP实现本地图片上传和验证功能

    PHP实现本地图片上传和验证功能

    这篇文章主要为大家详细介绍了PHP实现本地图片上传和验证功能的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • Js鼠标跟随代码小手点击实例方法

    Js鼠标跟随代码小手点击实例方法

    一个跟随鼠标的小手效果,鼠标移在哪里,小手就跟着移向哪里,会出现手的效果,放在链接上的时候,手会变化,两只手很可爱哦,JS鼠标跟随代码分享与大家。
    2013-05-05
  • html5+canvas实现支持触屏的签名插件教程

    html5+canvas实现支持触屏的签名插件教程

    jq-signature.js是一个帮助你创建签名的jQuery插件,允许你的用户使用鼠标,手指或者铅笔生成签名。下面这篇文章主要给大家介绍了利用html5+canvas实现支持触屏的签名插件的相关资料,需要的朋友可以参考下。
    2017-05-05

最新评论