分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – 页面上的两个旋转木马不工作，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

<!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 _@R_246_10586@l,i,_link;

                    _@R_246_10586@l = $( "#carousel,#carousel2").rcarousel( "get@R_246_10586@lPages" );

                    for ( i = 0; i < _@R_246_10586@l; 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",#pages2" )
                        .removeClass( "on" )
                        .css( "BACkground-image","url(images/page-off.png)" );

                    $( "a",#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 );
                        }
                    );
            });

@H_419_23@解决方法

正如oske所说,你在页面中有一些具有相同id的元素,这是一种不好的做法. id必须是唯一的.
也许这不是问题所在,但您应该为导航@L_450_10@使用不同的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>

编辑：

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

$("#carousel").rcarousel({
visible: 4,auto: {
  enabled: true
},pageLoaded: pageLoaded
navigation: {
   prev: "#ui-carousel-prev",next: "#ui-carousel-next"
}
});

$("#carouse2").rcarousel({
visible: 4,pageLoaded: pageLoaded
navigation: {
   prev: "#ui-carousel2-prev",next: "#ui-carousel2-next"
}
});