單張頁面中的多滑塊

之前我在這裏問過問題：how to make image slider into while loop但找不到正確的答案。單張頁面中的多滑塊

現在我修改了一些代碼。它工作正常。仍然需要簡化JavaScript和CSS。誰能幫我？。

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 


    <!-- jQuery (required) --> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script> 


    <!-- Anything Slider --> 
    <link rel="stylesheet" href="css/anythingslider.css"> 
    <script src="js/jquery.anythingslider.js"></script> 


    <!-- Define slider dimensions here --> 
    <style> 
    #slider1 { width: 200px; height: 250px; } 
    #slider2 { width: 200px; height: 250px; } 
    #slider3 { width: 200px; height: 250px; } 
    #slider4 { width: 200px; height: 250px; } 
    #slider5 { width: 200px; height: 250px; } 
    #slider6 { width: 200px; height: 250px; } 
    </style> 

    <!-- AnythingSlider initialization --> 
    <script> 
     // DOM Ready 
     $(function(){ 
      $('#slider1').anythingSlider(); 
     }); 

     $(function(){ 
      $('#slider2').anythingSlider(); 
     }); 

     $(function(){ 
      $('#slider3').anythingSlider(); 
     }); 

     $(function(){ 
      $('#slider4').anythingSlider(); 
     }); 

     $(function(){ 
      $('#slider5').anythingSlider(); 
     }); 

     $(function(){ 
      $('#slider6').anythingSlider(); 
     }); 
    </script> 

</head> 

<body id="simple"> 





<?php 
for($x=1;$x<=6;$x++){ 
$Slider="slider".$x; 
?> 

    <div id="<?php echo $Slider;?>"> 
     <li><img src="demos/images/slide-civil-1.jpg" alt=""></li> 

     <li><img src="demos/images/slide-env-1.jpg" alt=""></li> 

     <li><img src="demos/images/slide-civil-2.jpg" alt=""></li> 

     <li><img src="demos/images/slide-env-2.jpg" alt=""></li> 
    </div> 
<?php }?> 
    <!-- END AnythingSlider --> 


</body> 

</html>

來源

2016-01-21 yaseen ahmed

分別訪問他們，你拿了別人的代碼，發佈了一個新問題，*富*。 –

而不是使用一堆IDS的，將它們組合成一個類.slider

<style> 
    .slider { width: 200px; height: 250px; } 
</style>

$(function(){ 
    $('.slider').anythingSlider(); 
});

<?php 
for($x=1;$x<=6;$x++) { 
?> 

    <div class="slider"> 
     <li><img src="demos/images/slide-civil-1.jpg" alt=""></li> 

     <li><img src="demos/images/slide-env-1.jpg" alt=""></li> 

     <li><img src="demos/images/slide-civil-2.jpg" alt=""></li> 

     <li><img src="demos/images/slide-env-2.jpg" alt=""></li> 
    </div> 
<?php }?>

如果您需要能夠訪問它們separatel Y，你可以做到這一點

<?php 
for($x=1;$x<=6;$x++) { 
$Slider="slider".$x; 
?> 

    <div class="slider <?php echo $Slider;?>"> 
     <li><img src="demos/images/slide-civil-1.jpg" alt=""></li> 

     <li><img src="demos/images/slide-env-1.jpg" alt=""></li> 

     <li><img src="demos/images/slide-civil-2.jpg" alt=""></li> 

     <li><img src="demos/images/slide-env-2.jpg" alt=""></li> 
    </div> 
<?php }?>

這樣，你就可以控制只使用一個類的CSS，但仍然能夠通過$('.slider'+sliderNumber).doSomething()

來源

2016-01-21 17:46:09 Minderov

是工作fine.thanks很多。 –

@yaseenahmed這個網站是雙向的。如果你期望得到幫助，你應該通過接受他們的回答來獎勵那些幫助你的人。閱讀[如何接受答案的工作？]（http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work） –

單張頁面中的多滑塊

回答

相關問題