jQuery SlideShow不会显示所有图像

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一个空格。 没有空格，选择器表示具有slider和id x的元素。 但是，空格表示元素为class slider ，后代为id x 。

 $(".slider #"+count)

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

 <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>

更新

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

$("#"+count)

jQuery SlideShow不会显示所有图像

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-06-07 20:57:01

jQuery SlideShow不会显示所有图像

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-06-07 20:57:01

解决方案1
1 已采纳 2015-06-07 20:57:01