Question

早些时候我在这里提出问题：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>

Answer 1

而不是使用一堆id，将它们组合成一个类.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 }?>

如果您需要单独访问它们，可以执行此操作

<?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()

单独访问它们

单页中的多滑块

1 个答案: