Question

我一直在尝试将滑块模型添加到网页中，我想在两个不同的div中添加滑块。我尝试重命名元素和类名。它不是wrk ...有没有解决方案???是否可以在同一页面中使用两次jquery插件？

我正在尝试添加插件代码


      var currentPosition1 = 0;
                  var slideWidth1 = 900;
                  var slides1 = $('.slider1');
                  var numberOfSlides1 = slides1.length;

                  // Remove scrollbar in JS
                  $('#slidesContainer1').css('overflow', 'hidden');

                  // Wrap all .slides with #slideInner div
                  slides1
                    .wrapAll('')
                    // Float left to display horizontally, readjust .slides width
                    .css({
                      'float' : 'left',
                      'width' : slideWidth1
                    });

                  // Set #slideInner width equal to total width of all slides
                  $('#slideInner1').css('width', slideWidth1 * numberOfSlides1);

                  // Insert controls in the DOM
                  $('#slideshow1')
                    .prepend('Clicking moves left')
                    .append('Clicking moves right');

                  // Hide left arrow control on first load
                  manageControls1(currentPosition1);

                  // Create event listeners for .controls clicks
                  $('.control')
                    .bind('click', function(){
                    // Determine new position
                    currentPosition1 = ($(this).attr('id')=='rightControl1') ? currentPosition1+1 : currentPosition1-1;

                    // Hide / show controls
                    manageControls1(currentPosition1);
                    // Move slideInner using margin-left
                    $('#slideInner1').animate({
                      'marginLeft' : slideWidth1*(-currentPosition1)
                    });
                  });

                  // manageControls: Hides and Shows controls depending on currentPosition
                  function manageControls1(position1){
                    // Hide left arrow if position is first slider2
                    if(position1==0){ $('#leftControl1').hide() } else{ $('#leftControl1').show() }
                    // Hide right arrow if position is last slider2
                    if(position1==numberOfSlides1-1){ $('#rightControl1').hide() } else{ $('#rightControl1').show() }
                  }

进入div Panel1

<div class="panel1">
    <div id="slideshow1">
       <div id="slidesContainer1">




          <div class="slider1">
                <table style="margin-bottom:50px;"><tbody id="facetPrsnRslt"></tbody></table>
           </div>
           <div class="slider1">
               <p>This is the END my Friend...</p>
           </div>
      </div>
    </div>


</div>

，还有另一个div面板2，我想在panel2中添加相同的滑块插件，没有运气......

Answer 1

所以你有一组代码可以做你想做的事情，但是想在多个元素中使用它？你所拥有的只是简单的“用户脚本” - 一组代码可以做你想要的东西......就是这样，魔术就完成了。如果您想使其可重用且可扩展，请尝试构建真正的插件，这可以做到：

$('set_of_elements').myOwnPlugin({option:'foo'});

如果您想深入了解插件开发的具体细节，请查看this article，它会彻底解释它（最初可能会让人感到困惑）。在您掌握了基础知识之后，您可能希望获得用于构建插件代码结构的“模板”。我个人使用了2个样板，this one和this one。前者使用jQuery文章中的修改版本，另一个使用OOP方法。

Answer 2

这取决于插件，我们不能说所有插件都可以在一个html文件中使用两次。但是那个特定的插件似乎有效。我想知道你是否正在改变类或id，我看到了插件的源代码，它需要类来放置一些CSS，但容器id是你必须用来初始化幻灯片

<div id="showcase1" class="showcase">
<!-- contents needed for the showcase -->
</div>
<div id="showcase2" class="showcase">
<!-- contents needed for the showcase -->
</div>

在javascript中

$(document).ready( function() {
    $("#showcase1").awShowcase({ /* config of this showcase */ });
    $("#showcase2").awShowcase({ /* config of this showcase */ });
})

以下是jsfiddle http://jsfiddle.net/6qkjbqdh/

中的示例

我注意到该插件使用旧版本的jQuery（1.5.2），请记住，您项目中包含的版本可能更新，可能会导致问题。

此致

我们可以在一个页面中两次使用相同的jquery插件吗？

2 个答案: