JS简单的轮播的图片滚动实例
发布时间:2024-03-19 19:46:31
标签:轮播,图片,滚动
[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.aspxhome.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);
};
};
0
投稿
猜你喜欢
- 前言至今,ChatGPT 已经火了很多轮,我在第一轮的时候注册了账号,遗憾的是,没有彻头彻尾好好地体验过一次。最近这一次火爆,ChatGPT
- 拉取网易蜂巢的mysql-server:5.6docker pull hub.c.163.com/nce2/mysql:5.6创建mysql
- 本文实例讲述了Python字符串、列表、元组、字典、集合。分享给大家供大家参考,具体如下:附加:python的很多编译器提供了代码补全功能,
- 我的文章的意义服务端开发,python,django这些内容上面的链接中有详细的阐述. 我写的内容肯定没有上面的完备,准确. 我的文章的价值
- 下载下面提供两种下载地址,官网地址一般为最新的,网盘地址会定期更新,但是不保证一定是最新的官网下载地址:https://www.jetbra
- 将 PDF 转换为 CSV在机器学习中,我们应该少一些“数据清理”,多一些“数据
- 1.实现的思路(1)首先使用一个处理画框的程序,将图片中的有车和无车的停车位给画出来,并且保存坐标(如果画错了,将鼠标移至要删除的框中,右击
- 备忘一下python中的字典如何遍历,没有什么太多技术含量.仅供作为初学者的我参考.#!/usr/bin/env python# codin
- code:f = open('yesterday','r',encoding='utf-8'
- 本文实例讲述了Python面向对象之反射/自省机制。分享给大家供大家参考,具体如下:反射:程序可以访问,检测和修改它本身状态或行为的一种能力
- 1、查询锁情况select sid,serial#,event,BLOCKING_SESSION from v$session where
- 如何让页面背景五彩缤纷? <%@ Language=VBScript %><html>
- Python try重新执行:def numberinput(): #创建方法 try: s=int(input('n
- 本文实例讲述了Laravel框架文件上传功能实现方法。分享给大家供大家参考,具体如下:以Laravel 5.2.45 框架为主,进行文件上传
- 绘制图形时使用了中文标题,会出现乱码原因是matplotlib.pyplot在显示时无法找到合适的字体。先把需要的字体(在系统盘C盘的win
- <% pagenum=55'指定打印行数 %> <HTML> <HEAD> <
- 这篇文章主要介绍了Python enumerate函数遍历数据对象组合过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定
- 需要的软件phpStudy 用来导入一个数据库api-server 数据库功能可以开启一个服务器,让开发环境可以使用生产环境的网址请求安装
- 如果是django2.0 必须下载xadmin2.0 不然很多地方不兼容xadmin2.0下载地址https://github.com/ss
- 报错:Uncaught SyntaxError: Unexpected token o in JSON at position 1at JS