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 相关文章推荐
[Web]防止用户复制页面内容和另存页面的方法
Feb 06 Javascript
jQuery前台数据获取实现代码
Mar 16 Javascript
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
JavaScript省市联动实现代码
Feb 15 Javascript
Javascript基础教程之数组 array
Jan 18 Javascript
JS实现网页表格自动变大缩小的方法
Mar 09 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 Javascript
JS未跨域操作iframe里的DOM
Jun 01 Javascript
Bootstrap使用基础教程详解
Sep 05 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 Javascript
js实现浏览器打印功能的示例代码
Jul 15 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
curl实现站外采集的方法和技巧
2014/01/31 PHP
php中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
js css 实现遮罩层覆盖其他页面元素附图
2014/09/22 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
layui表格实现代码
2017/05/20 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
AngularJS路由删除#符号解决的办法
2017/09/28 Javascript
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
JavaScript中layim之整合右键菜单的示例代码
2021/02/06 Javascript
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
Python实现保证只能运行一个脚本实例
2015/06/24 Python
python实现简单爬虫功能的示例
2016/10/24 Python
python 表达式和语句及for、while循环练习实例
2017/07/07 Python
Python连接phoenix的方法示例
2017/09/29 Python
Python字典的核心底层原理讲解
2019/01/24 Python
python批量图片处理简单示例
2019/08/06 Python
python 中xpath爬虫实例详解
2019/08/26 Python
如何通过Python3和ssl实现加密通信功能
2020/05/09 Python
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
如何利用find命令查找文件
2016/11/18 面试题
艺人经纪人岗位职责
2014/04/15 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
2014年幼儿园学期工作总结
2014/12/05 职场文书
工程部文员岗位职责
2015/02/04 职场文书
入党团支部推荐意见
2015/06/02 职场文书
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS
python微信智能AI机器人实现多种支付方式
2022/04/12 Python