4

我正在尝试在我的页面上设置两个轮播，但我无法单独控制每个轮播，当我单击导航按钮时，它会移动两个轮播。任何想法？我应该更改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 );
                        }
                    );
            });
4

1 回答 1

5

正如 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 文件中分别声明两个 carrousel，并为它们提供上一个和下一个 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"
}
});
于 2013-04-25T09:29:18.207 回答