使用jQuery Tools scrollable注意事项

项目开发中一直使用jQuery Tools中scrollable插件,一直也只是停留在使用上,最多看文档实现如何调用它的prev(spped)和next(speed)等几个方法。因为都是要完成几张图片在首页轮流展示,开发人员和测试人员都没有去关注图片的播放顺序是否正确。今天测试人员开出了一个bug,说页面在第一次载入时,scrollable展示图片的顺序不对。显示的是最后一个,而且显示第二张图片时,实际图片是第二张图片,而不是第一张。因为很多情况下,我们会出现表示当前第几张图片的小icon,如下图:

clip_image001[4]

问题来了,scrollable默认不是从第一张图片开始显示,而是:image 4->image 2->image3->image4。第一次不是显示的image 1。通过chrome develop tools,显示的cloned的元素。如下:

clip_image002[4]

本身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

你可能感兴趣的:(jquery)