0

我正在尝试创建一个非常简单的 jquery 滑块，而不是使用可能存在的数百万个滑块中的一个。所以我几乎完成了它，但我有一个问题。我正在使用 jquery 的动画来移动图像，并且我需要在同一水平线上显示所有图像才能使脚本正常工作。现在，它们是垂直列出的，我已经考虑了 2 个小时。所以这里是 HTML：

<div id="gallery-wrap">
<div id="gallery">
    <img class="galleryimage" src="http://materiaalit.kotisivut.name/sivustokuvat/ccc.PNG" alt="" />
    <img class="galleryimage"  src="http://materiaalit.kotisivut.name/sivustokuvat/coverline.PNG" alt="" />
    <img class="galleryimage"  src="http://materiaalit.kotisivut.name/sivustokuvat/ccc.PNG" alt="" />
    <img class="galleryimage"  src="http://materiaalit.kotisivut.name/sivustokuvat/coverline.PNG" alt="" />
    <img class="galleryimage"  src="http://materiaalit.kotisivut.name/sivustokuvat/ccc.PNG" alt="" />
    <img class="galleryimage"  src="http://materiaalit.kotisivut.name/sivustokuvat/coverline.PNG" alt="" />
</div>
<div id="gallery-controls">
<a id="gallery-prev" href="#"><img alt="" /> </a>
<a id="gallery-next" href="#"><img alt="" /></a></div>
</div>
<div style="clear: both;"></div>

CSS：

    #gallery-wrap{margin: 0 auto; overflow: visible; width: 100%; position: relative; height:300px; border:1px solid black; border-radius:6px; z-index:3;}
#gallery{position: relative; left: 0; top: 0; width:100%;}
.galleryimage{float:left; width:100%; height:300px;}

#gallery-controls{width: 100%; z-index:4;}
#gallery-prev{position:absolute; left:0px; top:0px; width:50%; height:300px; background-color:rgba(77,77,77,0.5);}
#gallery-next{position:absolute; right:0px; top:0px;  width:50%; height:300px; background-color:rgba(88,88,88,0.5);}

和jQuery：

 $(document).ready(function(){ 

    $("#gallery-prev").click(function(){
  $(".galleryimage").animate({"left": "-=100%"}, "slow");
});

$("#gallery-next").click(function(){
  $(".galleryimage").animate({"left": "+=100%"}, "slow");
});

});

这是一张图片，显示目前图像是如何渲染的，以防万一我解释错了，英语不是我的第一语言：

在此处输入图像描述

我试过 display:inline 没有运气。

4

3 回答 3

0

使用float:left而不是display:inline强制内联流而不丢失大小调整功能。

这是一个例子：

如果您想强制它不使用狭窄的浏览器窗口换行，请为画廊设置固定宽度，如下所示：

#gallery
{
    width: 1500px;
}
于 2012-07-22T12:20:02.667 回答
0

您正在使用#gallery li img {display:inline;}

而是应用于display:inline; 此#gallery li并将其从中删除#gallery li img

#gallery li{width: /*here goes some width*/; height: 300px; float:left; display: inline;}

并且不要将图像和 li 元素的宽度用作 100%，请查看我的小提琴

我看到了您页面的来源，假设您需要将所有图像放在一个水平行中，为您的<li>元素设置宽度，并<div style="clear: both;"></div>在文本段落之前使用以清除浮动。

于 2012-07-22T12:23:13.960 回答
0

你可以让图像的容器有

{
  white-space: nowrap;
}

正如在这个问题上回答的那样如何调整 ul 宽度属性？

于 2012-07-22T12:43:06.870 回答