使用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; } -->

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小白课代表

更新|PC截图工具的最佳选择。

说到截图,最常用的可能就是QQ自带的截图功能了,简单流畅能满足我们的日常需求,依附于QQ,没有特殊的需求甚至不需要其他的截图软件。

1330
来自专栏ytkah

微信公众平台编辑器可以剪裁和替换正文图片了

  之前微信公众平台后台编辑器上线封面图裁剪功能,时隔近两个月的今天,公众平台编辑器正文图片也可以剪裁和替换了,简单的图片裁剪编辑小编们再也不用放到ps等作图软...

3405
来自专栏自动化测试实战

船长带你看书——《selenium2 python 自动化测试实战》(2)

3827
来自专栏HTML5学堂

传统企业站开发 - 页面布局

前几期我们讲解了HTML+CSS的基本知识点,也带着大家分析过一些案例。从简单的页面结构到页面布局的实现,再到页面的优化。我们学习到的东西挺多的,但是在实战开发...

4466
来自专栏前端架构与工程

解决transition动画与display冲突的几种方法

如demo(如果没有显示,请查看源地址http://jsfiddle.net/ihardcoder/HNduT/2/)所示,基本的效果是在点击“Translat...

2106
来自专栏极客慕白的成长之路

图标字体应用实践

使用的时候,通过background-position调整显示的位置,如下图所示:

1742
来自专栏编程之路

羊皮书APP(Android版)开发系列(二十七)一分钟轻松修改CheckBox、RadioButton、RatingBar、SeekBar样式

总结:通过一个简单的样式定义,即可完成对android原生控件样式的修改,省时省力省资源。赶紧试试吧!

1393
来自专栏Alan's Lab

Angular2 返回时组件生命周期函数不被调用的解决方法

这两天使用 Angular2 遇到的一个 @angular/router 的 bug:

1574
来自专栏CSDN技术头条

【独家】饿了么前端团队快应用背后研发实践

饿了么是一年前开始参与内测尝试开发快应用的,看着快应用平台一步一步的走过来,发展的越来越好。目前来说快应用开发条件已经比较完善,本次分享,为大家介绍前端开发人员...

2273
来自专栏Android小菜鸡

自定义组件——TitleView

  TitleView是一个常用的顶部标题栏组件,操作简单,可以快速搭建,并实现统一管理标题栏的目的。   采用建造者模式,支持快速构建back按钮、标题名、...

903

扫码关注云+社区

领取腾讯云代金券