0

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

HTML 代码：

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

代码：

@charset "utf-8";

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

}

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

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

我希望我足够清楚！

任何帮助将不胜感激！:)

4

5 回答 5

0

如果你想在水平线上显示你的图像

确保这一点：

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

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

在你的情况下它不会。

现在，既然您无论如何都想一次只显示一张图像，那么制作所有图像，display:none然后只需选择其中一个（按给定顺序）并制作display:block.

现在，由于您不能这样做，因此仅使用 CSS，您将需要 javascript(jQuery)。

看看这个超级简单的小提琴，展示你需要什么。

我正在做的就是：

  • 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.sliderimgs隐藏起来，并使imgdata-image-index属性等于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);
于 2013-03-24T10:11:19.600 回答
0

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

一个固定宽度的容器overflow: auto与一个宽度为 5 个图像的总宽度的孩子一起使用。这将创建一个水平滚动条。

然后使用脚本，您可以通过管理显示哪些图像以及隐藏哪些图像来创建幻灯片。虽然你会想要 350 像素的宽度，而不是 400 像素 - 单个图像的宽度。一定要包括像 Next 和 Pause/Play 之类的控件，也许是 Previous。如果它不自动启动就更好了。不错的教程

于 2013-03-24T10:13:40.963 回答
0

添加

.slider {
 display: block;
}

然后添加 display:inline-block; 到 .slider img

删除浮动：左；

试试看。这个对我有用。

于 2013-03-24T10:20:59.100 回答
0

尝试：

.slider img {
    width: 900px;
    height: 650px;
    display: inline-block:
}
于 2013-03-24T09:54:34.167 回答
-2

制作一个 ul 或 ol 并将子项目（此处为图像）添加为同一列表的 li。在 css 中确保有 list-style:none 并添加边距或填充，甚至根据需要定位它们。

于 2015-12-18T04:28:11.480 回答