Question

我是Jquery的新手，我的问题是，我无法在页面的不同部分调用插件效果。我有一个像下面的html组件......

<div class="frame" class="basic" style="overflow: hidden;">
<ul class="slidee" style="-webkit-transform: translateZ(0px) translateX(-4788px); width: 6840px;">
<li>
<div class="thumbnail">
<img src="Files/a6.jpg" class="zthumb">
<div class="caption">
<p><small><a href="#">Car 6</a></small></p><p>
 </p><p><strong>10 EUR</strong></p>
 </div>
</div>
<li>
<div class="thumbnail">
<img src="Files/a6.jpg" class="zthumb">
<div class="caption">
<p><small><a href="#">Car 6</a></small></p><p>
</p><p><strong>10 EUR</strong></p>
</div>
 </div>
</li>
</div>

我正在使用3个脚本

<script src="sly.js" type="text/javascript" ></script>
<script src="horizontal.js"></script>
<script src="plugins.js"></script>

horizontal.js具有以下组件

jQuery(function($){
    'use strict';   
(function () {
        var $frame  = $('#basic');
        var $slidee = $frame.children('ul').eq(0);
        var $wrap   = $frame.parent();

        // Call Sly on frame
        $frame.sly({
            horizontal: 1,
            itemNav: 'basic',
            smart: 1,
            activateOn: 'click',
            mouseDragging: 1,
            touchDragging: 1,
            releaseSwing: 1,
            startAt: 3,
            scrollBar: $wrap.find('.scrollbar'),
            scrollBy: 1,
            pagesBar: $wrap.find('.pages'),
            activatePageOn: 'click',
            speed: 300,
            elasticBounds: 1,
            easing: 'easeOutExpo',
            dragHandle: 1,
            dynamicHandle: 1,
            clickBar: 1,

            // Buttons
            forward: $wrap.find('.forward'),
            backward: $wrap.find('.backward'),
            prev: $wrap.find('.prev'),
            next: $wrap.find('.next'),
            prevPage: $wrap.find('.prevPage'),
            nextPage: $wrap.find('.nextPage')
        });

        // To Start button
        $wrap.find('.toStart').on('click', function () {
            var item = $(this).data('item');
            // Animate a particular item to the start of the frame.
            // If no item is provided, the whole content will be animated.
            $frame.sly('toStart', item);
        });

        // To Center button
        $wrap.find('.toCenter').on('click', function () {
            var item = $(this).data('item');
            // Animate a particular item to the center of the frame.
            // If no item is provided, the whole content will be animated.
            $frame.sly('toCenter', item);
        });

        // To End button
        $wrap.find('.toEnd').on('click', function () {
            var item = $(this).data('item');
            // Animate a particular item to the end of the frame.
            // If no item is provided, the whole content will be animated.
            $frame.sly('toEnd', item);
        });

        // Add item
        $wrap.find('.add').on('click', function () {
            $frame.sly('add', '<li>' + $slidee.children().length + '</li>');
        });

        // Remove item
        $wrap.find('.remove').on('click', function () {
            $frame.sly('remove', -1);
        });
    }());
});

如何在同一页面中的div中产生类似效果，就像另一帧一样...在单个页面的不同部分调用同一个插件的方法是什么？

我在其中包含了其他文件http://jsfiddle.net/renmathew/34RV3/2/

如何在一个页面中多次调用狡猾的滚动插件效果？

0 个答案: