Question

我创建了这个Jquery滑块，但第一个图像和第二个图像之间以及第二个和第三个图像之间有空白区域。我希望在滑动时将图像粘在一起。我以什么方式更改此代码？

<html>
    <head>
    <title> Jquery Slider </title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <style type="text/css">
    .slider{
        width: 800px;
        height: 350px;
        overflow: hidden;
        margin: 30px auto;
        font-size: 0px;

    }
    .slider img{
        width: 800px;
        height: 350px;

    }
    </style>

    <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>
    </head>
    <body onload="Slider();">
        <div class="slider">
        <img id="1" src="http://www.stockvault.net/data/2009/07/22/109588/small.jpg" alt="leaf"></img>
        <img id="2" src="http://www.stockvault.net/data/2011/05/31/124348/small.jpg" alt="path"></img>
        <img id="3" src="http://www.stockvault.net/data/2013/12/30/152291/featured.jpg" alt="rice field"></img>
        </div>
    </body>
    </html>

Answer 1

IMG标签是'内联'元素：就像某段文字一样，这就是为什么它们之间会显示空格的原因。您可以使用这种仍然可读的代码：

<body onload="Slider();">
   <div class="slider">
       <img id="1" src="http://www.stockvault.net/data/2009/07/22/109588/small.jpg" alt="leaf"></img
      ><img id="2" src="http://www.stockvault.net/data/2011/05/31/124348/small.jpg" alt="path"></img
      ><img id="3" src="http://www.stockvault.net/data/2013/12/30/152291/featured.jpg" alt="rice field"></img>
   </div>
</body>

图像之间的Jquery滑块空白

1 个答案: