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