Question

<html>
    <head>
        <meta charset = "utf-8/">
        <title> Jquery </title>
       <script type = "text/javascript" src = "http://code.jquery.com/jquery-1.11.3.min.js"></script> 
       <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>


       <link rel = "stylesheet" type = "text/css" href = "RizzStyle.css"/> 

   </head>

    <script type = "text/javascript">

    function Slider() {

    $(".slider #1").show ("fade" , 500);

    $(".slider #1").delay(5500).hide("slide", {direction : "left"}, 500);


    var sc = $("slider img").size();
    var count = 2;

   setInterval(function(){
        $(".slider#"+count).show("slide",{direction:'right'}, 500);
        $(".slider#"+count).delay(5500).hide("slide",{direction:'left'},500);

        if ( count == sc ) {

            count = 1;

        }else {
            count = count+1;
        }


    },6500);
}



    </script>




    <body onload = "Slider();">


    <div id = "header">
        <h1> Jquery</h1>

    </div>  

        <div id = "container"> 

            <div  class = "slider" > 
             <img id = "1" src = "North.jpg" border = "0" alt = "North"/>
             <img id = "2" src = "Android.jpg" border = "0" alt = "Android"/>
             <img id = "3" src = "Wolf.jpg" border = "0" alt = "Wolf"/>


            </div>

            <div class = "shadow">

            </div>


        </div>

    </body>



</html>

好的，我试图在jQuery中创建幻灯片。第一个图像工作得很好，因为它有一个平滑的淡入淡出并在最后扫出动作，但你可以看到我有三个图像而另外两个没有出现所以屏幕只是空白的默认阴影图像在底部（没关系）帮助将非常感谢:)

Answer 1

您需要.slider和id之间的空格。如果没有空格，则选择器表示具有类slider和id x的元素。但是，空格表示具有类slider的元素和具有id x的后代。

 $(".slider #"+count)

＆＃13;

function Slider() {

    $(".slider #1").show ("fade" , 500);

    $(".slider #1").delay(5500).hide("slide", {direction : "left"}, 500);


    var sc = $("slider img").size();
    var count = 2;

   setInterval(function(){
        $(".slider #"+count).show("slide",{direction:'right'}, 500);
        $(".slider #"+count).delay(5500).hide("slide",{direction:'left'},500);

        if ( count == sc ) {

            count = 1;

        }else {
            count = count+1;
        }


    },6500);
}
Slider();

＆＃13;

<meta charset = "utf-8/">
        <title> Jquery </title>
       <script type = "text/javascript" src = "http://code.jquery.com/jquery-1.11.3.min.js"></script> 
       <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>


       <link rel = "stylesheet" type = "text/css" href = "RizzStyle.css"/> 



    <div id = "header">
        <h1> Jquery</h1>

    </div>  

        <div id = "container"> 

            <div  class = "slider" > 
             <img id = "1" src = "North.jpg" border = "0" alt = "North"/>
             <img id = "2" src = "Android.jpg" border = "0" alt = "Android"/>
             <img id = "3" src = "Wolf.jpg" border = "0" alt = "Wolf"/>


            </div>

            <div class = "shadow">

            </div>


        </div>

＆＃13;

<强>更新

由于所有ID在文档中都应该是唯一的，因此使用id本身就足够了。

$("#"+count)

jQuery SlideShow不显示所有图像

1 个答案: