使用jQuery Tools scrollable注意事项
时间:2022-04-22
本文章向大家介绍使用jQuery Tools scrollable注意事项,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
项目开发中一直使用jQuery Tools中scrollable插件,一直也只是停留在使用上,最多看文档实现如何调用它的prev(spped)和next(speed)等几个方法。因为都是要完成几张图片在首页轮流展示,开发人员和测试人员都没有去关注图片的播放顺序是否正确。今天测试人员开出了一个bug,说页面在第一次载入时,scrollable展示图片的顺序不对。显示的是最后一个,而且显示第二张图片时,实际图片是第二张图片,而不是第一张。因为很多情况下,我们会出现表示当前第几张图片的小icon,如下图:
问题来了,scrollable默认不是从第一张图片开始显示,而是:image 4->image 2->image3->image4。第一次不是显示的image 1。通过chrome develop tools,显示的cloned的元素。如下:
本身scrollable插件生成class为cloned的元素,是为了动画循环显示,但是在这里浏览器把它作为第一张图片显示了。
代码如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Tools Scrollable使用注意事项</title>
<!--jQuery Tools CDN-->
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<style type="text/css">
#itemsContainer {
margin:0 auto;
width:600px;
height:600px;
}
.scrollable {
position:relative;
overflow:hidden;
width:430px;
height:180px;
}
.scrollable .items {
width:2000em;
position:absolute;
}
.items div {
float:left;
}
</style>
</head>
<body>
<div id="itemsContainer">
<!-- root element for scrollable -->
<div class="scrollable" id="autoscroll">
<!-- root element for the items -->
<div class="items">
<!-- image 1 -->
<div>
<img src="images/google1.png" />
</div>
<!-- image 2 -->
<div>
<img src="images/google2.png" />
</div>
<!-- image 3 -->
<div>
<img src="images/google3.png" />
</div>
<div>
<img src="images/google4.png" />
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#autoscroll").scrollable({ circular: true }).autoscroll({ autoplay: true });
//setTimeout(function () {
// $("#autoscroll").scrollable({ circular: true }).autoscroll({ autoplay: true });
//},2000);
});
</script>
</body>
</html>
目前修复的方式,延迟调用scrollable()方法。所以使用setTimeout()进行2秒的延迟操作。
将上面的代码改为:
setTimeout(function () {
$("#autoscroll").scrollable({ circular: true }).autoscroll({ autoplay: true });
},2000);
重新运行页面,发现正常。
参考网址:
http://jquerytools.org/demos/scrollable/index.html
http://jquerytools.org/documentation/scrollable/index.html#api
<!-- .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } -->
- 用JAVA的DEA算法衡量社交媒体页面的流行度
- 如何构建智能反垃圾邮件的WordPress插件
- 【深入研究】使用RNN预测股票价格系列一
- 【深入研究】使用RNN预测股票价格系列二
- 教你用一行Python代码实现并行(附代码)
- 在美国国会图书馆标题表的SKOS上运行Apache Spark GraphX算法
- 【精选】破解波动性突破实盘系统
- 从程序员的角度看神经网络的激活功能
- 在线矩阵微积分工具,可以生成 Python/Latex 代码哦!
- 机器学习应用区块链系列(一)——如何开发一套自己的智能合约系统
- 使用Botkit和Rasa NLU构建智能聊天机器人
- 【量化投资】缠论面面观(附Python源码)
- 独家 | 教你用Q学习算法训练神经网络玩游戏(附源码)
- 使用重采样评估Python中机器学习算法的性能
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 聊聊claudb的Database
- WebSocket 初识篇
- (一)MessageQueue之消息入队
- 宇智波程序笔记2-kafka 生产发送消息失败无响应,
- 高并发系统三大利器之缓存
- Nuxt.js框架(SSR)学习笔记
- 也谈状态模式
- BFE.dev前端刷题1 - 实现curry()
- BFE.dev前端刷题2 - 实现curry() 并支持placeholder
- TKE集群日志解决方案之日志采集
- Newbe.Claptrap 框架入门,第三步 —— 定义 Claptrap,管理商品库存
- 以 B 站为例,聊聊站内消息系统的设计
- 微信小程序开发实战(22):上传文件和下载文件
- 语法糖--JAVA成长之路
- 使用 GitHub Action来托管AutoML软件