0

我是 stackoverflow 的新手,这是我的第一篇文章。我试图让 hide() 到 show() 处理多个对象,但我无法让它与内容滑块(液体滑块)一起工作。 http://www.alfonsocarmelo.it/margherita/index10.html 加载网站时,可以查看滑块(相机滑块),但是,当我点击左下角的“architettura”,然后点击“centroculturee - Expo' Flussi di eVenti, Catania" 应该使用液体滑块脚本查看内容滑块(图像和文本)。脚本单独运行完美,但在网站上有问题;它可见狭窄,而完美视图的宽度为视口的 100%。

HTML

<div id="architettura">
    <div class="content">
       <h4><span>A</span>rchitettura<span>/</span></h4>
       <img src="images/architettura/architettura.jpg">  
    </div>
 </div>

 <!-- architettura_centro_culturale_catania--> 
 <div id="architettura_centro_culturale_catania">
    <div class="content">
        <div class="liquid-slider"  id="slider-id">
                <div>
                  <h2 class="title">1</h2>

                   <div class="immagini">
                      <img src="images/pittura_02.jpg"> <!-- ELIMINAZIONE DIV E METTERE X OGNI FOTO align="left" width="60%" height="36%"-->
                      <img src="images/pittura_03.jpg">
                      <img src="images/pittura_04.jpg">
                   </div>

                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudindasdas</p>
                </div>
                <div>
                  <h2 class="title">2</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
                </div>          
                <div>
                  <h2 class="title">3</h2>
                  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
                </div>
                <div>
                  <h2 class="title">4</h2>
                  <p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
                </div>
        </div>
        <!-- Liquid Slider Ends Here -->


    </div> 
    <!-- end content -->
 </div>
 <!-- end architettura_centro_culturale_catania--> 

 <!-- architettura_centro_culturale_giarre--> 
 <div id="architettura_centro_culturale_giarre"></div>
 <!-- end centro culturale Giarre -->

 <div id="slideshow">
    <div class="content">
          <div class="fluid_container">

              <div class="camera_wrap camera_magenta_skin" id="camera_wrap_1">

                <div data-src="images/slides/prova3_modificata.jpg">

                    <div class="camera_caption fadeFromBottom">
                        pittura <span>/</span> LA RICCHEZZA INTERIORE
                    </div>

                </div>

                <div data-src="images/slides/prova4_modificata.jpg">
                    <div class="camera_caption fadeFromBottom">
                        architettura <span>/</span> MUSEO D&acute;ARTE CONTEMPORANEA E CENTRO POLIFUNZIONALE
                    </div>
                </div>



            </div> <!-- #camera_wrap_1 -->

          </div> <!-- .fluid_container  -->
    </div>
</div>


</section>

<footer>
 <nav>
    <ul id="fmenu">
        <li>
         <a href="#" id="idarchitettura"><span>a</span>rchitettura</a>
            <ul id="fmenu_architettura">
                <li id="centro_culturale_catania"><a href="#">centro culturale - Expo' Flussi di eVenti, Catania </a></li>
                <li id="centro_culturale_giarre"><a href="#">centro culturale, Giarre</a></li>
            </ul>  
        </li>
        <li>
         <a href="#" id="idpittura"><span>p</span>ittura</a>
            <ul id="fmenu_pittura">
                <li id="la_ricchezza_interiore"><a href="#">la ricchezza interiore</a></li>
                <li id="trattenuta_da_1_sentimento"><a href="#">trattenuta da un sentimento</a></li>
                <li id="il_bacio"><a href="#">il bacio</a></li>
                <li id="sguardo_ignoto"><a href="#">sguardo all&acute;Ignoto</a></li>
                <li id="kolorimmersi"><a href="#">kolorimmersi</a></li>    
                <li id="gli_amanti"><a href="#">gli Amanti</a></li>
                <li id="la_danzatrice"><a href="#">la danza(U)trice</a></li>
                <li id="lottare_senza_mani_senza_piedi"><a href="#">lottare senza mani e senza piedi</a></li>
                <li id="kolorinaere"><a href="#">kolorinaere</a></li>
            </ul>
        </li>
        <li>
         <a href="#" id="iddesign"><span>d</span>esign</a>
            <ul id="fmenu_design">
                <li id="borse_accessori"><a href="#">borse e accessori</a></li>
                <li id="monili"><a href="#">monili</a></li>
                <li id="oggetti_arredo"><a href="#">oggetti d&acute;arredo</a></li>
            </ul>   
        </li>
        <li id="pubblication"><a href="#"><span>p</span>ubblicazioni</a></li>
        <li id="profile"><a href="#"><span>p</span>rofilo</a></li>
    </ul>        
 </nav>
    </footer>

查询代码

   $('#idarchitettura').click(function() { 

              $('#slideshow').hide();

              $('#architettura_centro_culturale_catania').hide();
              $('#architettura_centro_culturale_giarre').hide(); 
              $('#pittura').hide();
              $('#pittura_la_ricchezza_interiore').hide();  
              $('#pittura_trattenuta_da_1_sentimento').hide(); 
              $('#pittura_il_bacio').hide(); 
              $('#pittura_sguardo_ignoto').hide();  
              $('#pittura_kolorimmersi').hide(); 
              $('#pittura_gli_amanti').hide(); 
              $('#pittura_la_danzatrice').hide();
              $('#pittura_lottare_senza_mani_senza_piedi').hide();
              $('#pittura_kolorinaere').hide();
              $('#profilo').hide();
              $('#pubblicazioni').hide();
              $('#design').hide();
              $('#design_borse_accessori').hide();
              $('#design_monili').hide();
              $('#design_oggetti_arredo').hide();

              $('#architettura').fadeIn('slow');

              /*for menu'*/
              $('#fmenu_architettura').slideToggle();
              $('#fmenu_pittura').slideUp('fast');
              $('#fmenu_design').slideUp('fast');
        }); 

        $('#centro_culturale_catania').click(function() {

              $('#pubblicazioni').hide();
              $('#profilo').hide(); 
              $('#architettura').hide();
              $('#architettura_centro_culturale_giarre').hide(); 
              $('#pittura').hide(); 
              $('#pittura_la_ricchezza_interiore').hide(); 
              $('#pittura_trattenuta_da_1_sentimento').hide(); 
              $('#pittura_sguardo_ignoto').hide();
              $('#pittura_il_bacio').hide();    
              $('#pittura_kolorimmersi').hide();   
              $('#pittura_gli_amanti').hide(); 
              $('#pittura_la_danzatrice').hide();
              $('#pittura_lottare_senza_mani_senza_piedi').hide();
              $('#pittura_kolorinaere').hide();
              $('#design').hide();
              $('#design_borse_accessori').hide();
              $('#design_monili').hide();
              $('#design_oggetti_arredo').hide();

              $('#architettura_centro_culturale_catania').fadeIn('slow');
        });

    });

我尝试了另一个滑块脚本,但是,我遇到了同样的问题,所以我认为 hide() 到 show() 的滑块脚本有问题..

任何帮助将不胜感激......我不知道如何做到这一点。谢谢你。

阿方索

4

2 回答 2

0

阿方索,执行一定是错的。我确定您共享的 .js 代码不是插件实现的一部分。另外,我不太明白您为什么要使用单独的 ID 隐藏所有这些 div。即使您真的需要所有这些 ID,我也会添加一个类来一次将它们全部隐藏(将使代码运行得更快)。例如:如果您将所有这些 ID 更改为 class="toHide",或者添加该类,而不是所有这些行,您可以简单地使用:

$('.toHide').hide();

和繁荣。一切都会一样。我建议你仔细检查你应该如何使用你的滑块插件

于 2012-12-18T13:27:17.400 回答
0

第七点是正确的,你不应该像那样单独隐藏你的元素。它可能会导致性能问题,而且它也只是草率的代码。

但是,关于Liquid Slider的问题,这是因为滑块不知道面板的高度(因为它们是隐藏的)。

如果您查看 DOM 树,您会看到:

<div class="liquid-slider" id="slider-id" style="height: 0px;">

注意高度是0?

Liquid Slider可让您访问大部分内部功能。您首先必须将滑块设置为对象,然后才能调整高度。我想您可以在adjustHeight()显示滑块的单击事件上添加该方法。试试看。

var sliderObject = $.data( $('#slider-id')[0], 'liquidSlider');

sliderObject.adjustHeight();
于 2012-12-18T17:26:43.233 回答