Question

我正在尝试在我的页面上设置两个旋转木马，但我无法单独控制每个旋转木马，当我点击导航按钮时，它会移动两个旋转木马。任何的想法？我应该在css文件中更改一些内容吗？或者用一个jquery运行两个轮播的正确命令是什么？

我的HTML代码：

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
  <link href="stylesheets/reset.css" rel="stylesheet" type="text/css" />
  <link href="stylesheets/main_css.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="scripts/browser-compatibility.js"></script>

  <script type="text/javascript" src="scripts/jquery.js"></script>
  <script type="text/javascript" src="widget/lib/jquery.ui.core.min.js"></script>
  <script type="text/javascript" src="widget/lib/jquery.ui.widget.min.js"></script>
  <script type="text/javascript" src="widget/lib/jquery.ui.rcarousel.min.js"></script>
  <link type="text/css" rel="stylesheet" href="widget/css/rcarousel.css" />
  <link rel="stylesheet" type="text/css" href="widget/css/style.css" />
  <script type="text/javascript" src="widget/lib/carous.js"></script>

 </head>
 <body>

     <div id="container">
      <div id="carousel" class="carousel_pfi cf">
       <div id="slide01" class="slide">
        <img src="images/placeholder_crs.png" />
        <div class="text">
            <h1>continuous carousel continuous carousel continuous carousel continuous carousel continuous carousel</h1>

         <p>driven by jQuon a pageon a pageon a pageery UI</p>
        </div>
       </div>
       <div id="slide02" class="slide">
        <img src="images/placeholder_crs.png" />
        <div class="text">
            <h1>any content continuous carousel continuous carousel continuous carousel continuous carousel continuous carousel</h1>

         <p>from images ton a pageon a pageon a pageo any HTML element</p>
        </div>
       </div>
       <div id="slide03" class="slide">
        <img src="images/placeholder_crs.png" />
        <div class="text">
            <h1>horizontal and vertical continuous carousel continuous carousel continuous carousel continuous carousel continuous carousel</h1>

         <p>carousels just onon a pageon a pageon a pageon a pagee click away</p>
        </div>
       </div>
       <div id="slide04" class="slide">
        <img src="images/placeholder_crs.png" />
        <div class="text">
            <h1>multi carousels</h1>

         <p>on a pageon a pageon a pageon a pageon a pageon a page</p>
        </div>
       </div>
       <div id="slide05" class="slide">
        <img src="images/placeholder_crs.png" />
        <div class="text">
            <h1>highly customizabl continuous carousel continuous carousel continuous carousel continuous carousel continuous carousele</h1>

         <p>style it whaton a pageon a pageon a pageever you like</p>
        </div>
       </div>
       <div id="slide06" class="slide">
        <img src="images/placeholder_crs.png" />
        <div class="text">
            <h1>multi browser support</h1>

         <p>supports even old browsers</p>
        </div>
       </div>
      </div>    
      <a href="#" id="ui-carousel-next"></a>
    <a href="#" id="ui-carousel-prev"></a>

      <div id="pages"></div>
     </div>
     <div id="container">
      <div id="carousel2" class="carousel_pfi cf">
       <div id="slide011" class="slide">
        <img src="images/placeholder_crs.png" />
        <div class="text">
            <h1>continuous carousel continuous carousel continuous carousel continuous carousel continuous carousel</h1>

         <p>driven by jQuon a pageon a pageon a pageery UI</p>
        </div>
       </div>
       <div id="slide022" class="slide">
        <img src="images/placeholder_crs.png" />
        <div class="text">
            <h1>any content continuous carousel continuous carousel continuous carousel continuous carousel continuous carousel</h1>

         <p>from images ton a pageon a pageon a pageo any HTML element</p>
        </div>
       </div>
       <div id="slide033" class="slide">
        <img src="images/placeholder_crs.png" />
        <div class="text">
            <h1>horizontal and vertical continuous carousel continuous carousel continuous carousel continuous carousel continuous carousel</h1>

         <p>carousels just onon a pageon a pageon a pageon a pagee click away</p>
        </div>
       </div>
       <div id="slide044" class="slide">
        <img src="images/placeholder_crs.png" />
        <div class="text">
            <h1>multi carousels</h1>

         <p>on a pageon a pageon a pageon a pageon a pageon a page</p>
        </div>
       </div>
       <div id="slide055" class="slide">
        <img src="images/placeholder_crs.png" />
        <div class="text">
            <h1>highly customizabl continuous carousel continuous carousel continuous carousel continuous carousel continuous carousele</h1>

         <p>style it whaton a pageon a pageon a pageever you like</p>
        </div>
       </div>
       <div id="slide066" class="slide">
        <img src="images/placeholder_crs.png" />
        <div class="text">
            <h1>multi browser support</h1>

         <p>supports even old browsers</p>
        </div>
       </div>
      </div>    <a href="#" id="ui-carousel-next2"></a>
    <a href="#" id="ui-carousel-prev2"></a>

      <div id="pages2"></div>
     </div>

 </body>

</html>

我的carous.js脚本：

jQuery(function($) {
                function generatePages() {
                    var _total, i, _link;

                    _total = $( "#carousel, #carousel2").rcarousel( "getTotalPages" );

                    for ( i = 0; i < _total; i++ ) {
                        _link = $( "<a href='#'></a>" );

                        $(_link)
                            .bind("click", {page: i},
                                function( event ) {
                                    $( "#carousel, #carousel2").rcarousel( "goToPage", event.data.page );
                                    event.preventDefault();
                                }
                            )
                            .addClass( "bullet off" )
                            .appendTo( "#pages, #pages2" );
                    }

                    // mark first page as active
                    $( "a:eq(0)", "#pages, #pages2" )
                        .removeClass( "off" )
                        .addClass( "on" )
                        .css( "background-image", "url(images/page-on.png)" );

                }

                function pageLoaded( event, data ) {
                    $( "a.on", "#pages, #pages2" )
                        .removeClass( "on" )
                        .css( "background-image", "url(images/page-off.png)" );

                    $( "a", "#pages, #pages2" )
                        .eq( data.page )
                        .addClass( "on" )
                        .css( "background-image", "url(images/page-on.png)" );
                }

                $("#carousel, #carousel2").rcarousel(
                    {
                        visible: 4,
                        step: 1,
                        speed: 700,
                        auto: {
                            enabled: true
                        },
                        width: 288,
                        height: 250,
                        start: generatePages,
                        margin: 0,
                        pageLoaded: pageLoaded

                    }
                );

                $( "#ui-carousel-next, #ui-carousel2-next" )
                    .add( "#ui-carousel-prev, #ui-carousel2-prev" )
                    .add( ".bullet" )
                    .hover(
                        function() {
                            $( this ).css( "opacity", 0.7 );
                        },
                        function() {
                            $( this ).css( "opacity", 1.0 );
                        }
                    );
            });

Answer 1

正如oske所说，你在页面中有一些具有相同id的元素，这是一种不好的做法。 id必须是唯一的。也许这不是问题所在，但您应该为导航链接使用不同的ID：

   <a href="#" id="ui-carousel-next"></a>
   <a href="#" id="ui-carousel-prev"></a>

和

   <a href="#" id="ui-carousel-next2"></a>
   <a href="#" id="ui-carousel-prev2"></a>

编辑：

所以你可以看到这个链接（https://github.com/ryrych/rcarousel/issues/13），这家伙有同样的问题。看来你必须在你的js文件中单独声明这两个转盘，并给它们上一个和下一个id链接：

$("#carousel").rcarousel({
visible: 4,
step: 1,
speed: 700,
auto: {
  enabled: true
},
width: 288,
height: 250,
start: generatePages,
margin: 0,
pageLoaded: pageLoaded
navigation: {
   prev: "#ui-carousel-prev",
   next: "#ui-carousel-next"
}
});

$("#carouse2").rcarousel({
visible: 4,
step: 1,
speed: 700,
auto: {
  enabled: true
},
width: 288,
height: 250,
start: generatePages,
margin: 0,
pageLoaded: pageLoaded
navigation: {
   prev: "#ui-carousel2-prev",
   next: "#ui-carousel2-next"
}
});

页面上的两个旋转木马不工作

1 个答案: