易滑塊1.7，請幫我

我在一個網站http://thesunkissedgirls.com.au/易滑塊1.7，請幫我

工作，並使用簡易滑塊1.7，但我有麻煩，當我refeash頁面所有滑塊負荷的第一滑塊下，然後開始。

我使用這段代碼：

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#slider").easySlider({ 
      auto: true, 
      continuous: true, 
      numeric: true, 
      speed: 500, 
      pause: 5000, 
      controlsShow: false 
     }); 
    }); 
</script>

請幫我修復這個bug。

謝謝。

來源

2011-07-05 Muzammil

請發表您的HTML和jQuery代碼 –

在滑塊初始化之前有一個小的延遲。您可以嘗試隱藏除滑塊初始化之前的第一個圖像之外的所有圖像：

像$('#slider li:not(:first)').hide();之類的東西應該可以做到。不要忘記在滑塊初始化後再次顯示它們。使用CSS和body類也可以做同樣的事情。

UPDATE 這裏是我想嘗試：

添加類容器和第一個列表元素：

<div id="slider" class="loading"> 
    <ul> 
     <li class="first"> 
      <a href="http://thesunkissedgirls.com.au/models"> 
       <img src="http://thesunkissedgirls.com.au/wp-content/uploads/2011/06/slider_262.jpg" alt="slide1" /> 
      </a> 
     </li> 
     <li> 
     […] 
     </li> 
    </ul> 
</div>

添加了CSS的隱藏所有，但如果第一個元素包裝有.loading類：

#slider.loading li { display: none; } 
#slider.loading li.first { display: block; }

最後刪除.loading類完成所有設置：

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#slider") 
      .easySlider({ 
       auto: true, 
       continuous: true, 
       numeric: true, 
       speed: 500, 
       pause: 5000, 
       controlsShow: false 
      }) 
      .removeClass('loading'); 
    }); 
</script>

來源

2011-07-05 14:53:14 polarblau

你能否請檢查代碼並給出主意！該怎麼辦..因爲我盡我所能，但無法修復。 – Muzammil

我以爲我做到了。我已經添加了一個更新，希望更清晰。 – polarblau

非常感謝你...我也發現這個問題的非常有趣的修復...我試着這個和它的工作.. [鏈接]（http://stackoverflow.com/questions/4237141/easyslider-1-7 -help-all-content-displayed-on-page-load）修復 – Muzammil

只要把easySlider腳本接近滑塊格在身體或之後更好。

<div id="slider"> 
     <ul> 

<li><a href="?id=1"><img src="images/01.jpg" alt="Css Template Preview" /></a></li> 

<li><a href="?id=2"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>   
<li><a href="?id=3"><img src="images/03.jpg" alt="Css Template Preview" /></a></li> 

<li><a href="?id=4"><img src="images/04.jpg" alt="Css Template Preview" /></a></li> 

<li><a href="?id=5"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>   
</ul> 

<!-- Slider ends --> 
</div> 


<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#slider").easySlider({ 
      auto: true, 
      continuous: true, 
      controlsShow: true, 
      prevId: 'prevBtn', 
      nextId: 'nextBtn', 
      pause: 5000 
     }); 
    }); 
</script>

來源

2013-04-28 23:46:31 Alex

易滑塊1.7，請幫我

回答

相關問題