Question

我的网页上有5张图片和一张div。当我加载页面时，图像会出现在另一个图像之下，但我想要做的是图像应该是直线而且div应该一次只显示一个。

HTML CODE：

<html>

<head>
<title>My City Karachi</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="css/slider.css" type="text/css" />
</head>

<body style="margin: 0; padding: 0;">

<div class="slider">
    <img src="asd.jpg"/>
    <img src="baba dedo.jpg"/>
    <img src="picccccture 3.jpg"/>
    <img src="Page-3.jpg"/>
    <img src="Page 4 copy.jpg" />
</div>
</body>

</html>

CSS代码：

@charset "utf-8";

html, body {
    margin: 0;
    padding: 0;

}

.slider {
    margin: 0 auto;
    overflow: hidden;
}

.slider img {
    width: 900px;
    height: 650px;  
    float:left;
}

我希望我足够清楚！

任何帮助都将受到高度赞赏！：）

Answer 1

尝试：

.slider img {
    width: 900px;
    height: 650px;
    display: inline-block:
}

Answer 2

如果您想以水平线显示图像

确保这一点：

width(parent container of Imgs) >= Sum(Width(individual Imgs))

只有这样它们才会出现在水平线上，否则就不会出现。

在你的情况下，它不会。

现在，既然你想要一次只显示一个图像，那么让它们全部display:none，然后只选择其中一个（按照给定的顺序）并制作它的display:block。

现在，既然你不能这样做，单独使用CSS，你将需要javascript（jQuery）。

看到这个超级简单fiddle，展示你需要的东西。

我所做的只是：

将div.slider内的所有imgs隐藏起来

 $('.slider img').each(function(i,v){
    $(this).attr("data-image-index",i).hide();
 });

还将新属性附加到你的imgs以确定索引，即

<img src="asd.jpg" alt="img1" data-image-index="0"  />
<img src="baba dedo.jpg" alt="img2" data-image-index="1" />
 ..
 ..

之后我创建了一个函数，它只隐藏了所有div.slider个imgs，并使data-image-index属性的img等于index可见。

   var index=0;
   function play(){
       $('.slider img').each(function(){
              var s = $(this).data("image-index");
              if(parseInt(s)===index)
                $(this).show();
              else
                $(this).hide();
        });
        index++;
        if(index>5)
           index=0;
   }

现在，因为我们需要在点击按钮或在给定的时间间隔内调用此函数，我已经这样做每1秒调用一次：

    setInterval("play()",1000);

Answer 3

工作示例： http://jsfiddle.net/tceb2/

固定宽度为overflow: auto的容器，其子宽度为5幅图像的总宽度。这将创建一个水平滚动条。

然后使用脚本，您可以通过管理显示的图像和隐藏的图像来创建幻灯片。虽然你想要的宽度为350px，而不是400px - 单个图像的宽度。一定要包括像Next和Pause / Play这样的控件，也许是Previous。如果不自动启动会好得多。 Nice tutorial

Answer 4

添加

.slider {
 display: block;
}

然后添加display：inline-block; to .slider img

删除float：left;

试试看。它对我有用。

Answer 5

制作ul或者ol并将子项目（此处为图像）添加为同一列表中的li。在css中确保有list-style：none并添加margin或padding甚至将它们定位为neededed。

css - 以直线对齐图像

5 个答案: