Question

我开发了一个自定义滑块。我只有一个图像动画出现，其他图像没有显示。如何用动画显示其他图像？

<html>
    <head>
        <title>TODO supply a title</title>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style type="text/css">
        .Slider
        {
            width: 800px;
            height: 350px;
            overflow: hidden;
            margin: 30px auto;
            background-image:url(http://cdn.css-tricks.com/wp-content/uploads/2011/02/spinnnnnn.gif);
            background-repeat: no-repeat;
            background-position: center;
        }
        .Shadow
        {
            background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSb6KDmhtvsBAzkpXLHcijTuE_gYERTMkx5xpkbUS0lwV8ByTFx);
            background-repeat: no-repeat;
            background-position: top;
            width: 864px;
            height: 144px;
            margin: -60px auto;

        }
        .Slider img{
            width: 800px;
            height: 350px;
            display: none;
        }


        </style>


        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>   
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 
        <script type="text/javascript">

            function Slider()
            {
                $(".Slider #1").show("fade",500);
                $(".Slider #1").delay(5500).hide("slide",{direction:'left'},500);
            }
            var slderCount=$(".Slider img.").size();
            var count=2;

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

                if(count==slderCount)
                {
                    count=1;
                }
                else
                {
                    count=count+1;
                }
            },6500);


        </script>


    </head>
    <body onload="Slider();">
        <div class="Slider">
           <img id="1" src="http://accessengsl.com/wp-content/files_mf/1.jpg"  border="0"  alt="Helping develop"/>
            <img id="2" src="http://accessengsl.com/wp-content/files_mf/trincokanthaleroad.jpg"  border="0"  alt="Helping concrete" />
            <img id="3" src="http://accessengsl.com/wp-content/files_mf/08_new.jpg"  border="0"  alt="no  develop" />

        </div>
        <div class="Shadow"> </div>

    </body>
</html>

Answer 1

将var slderCount=$(".Slider img.").size();更改为

var slderCount=$(".Slider img").length;

Answer 2

您的滑块计数选择器错误：

var slderCount=$(".Slider img.").size();

应该是：

var slderCount = $(".Slider").find("img").length;

但老实说，你只是在重新发明轮子。使用tinycarousel或任何其他滑块插件。

Answer 3

Trym

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

                if(count==slderCount)
                {
                    count=1;
                }
                else
                {
                    count=count+1;
                }
            },6500);

我的jQuery滑块无法正常工作

3 个答案: