jQuery Cycle - 在右侧对齐不同尺寸的图像？

Question

我有一个幻灯片（jquery 循环），用作网站的背景。问题是我想在右侧对齐照片，它们有不同的尺寸，并且由于某种原因，宽度最小的照片没有向右对齐...我尝试像人一样将 img 放入 div 中互联网上提出了不同的建议，但无济于事。这可以在不编辑插件的情况下实现吗？

HTML：

<p class="slideshow">
   <img src="31.jpg" alt="" />
   <img src="35.jpg" alt="" />
   <img src="36.jpg" alt="" />
</p> 

CSS：

p.slideshow {
    position:absolute;
    top:0;
    right:0;
    z-index:-999;
    overflow:hidden;
    background: url(images/stripe-bg.png) repeat;
    margin:0;
    padding:0;

    /* without setting the width and height 100% I get the
       annoying scroll bar on the right if photos are big in height */
    /*height:100%;
    width:100%;*/
}

您有任何线索如何将它们全部向右对齐吗？

谢谢， 克里斯

Answer 1

当我尝试右对齐容器中的某些内容时，我也遇到了这个问题。这个解决方案对我们有用：

$('#sltitles span').each(function() {
  $(this).css({right: '0'});
}); 

您需要在主插件之前运行它，才能将其应用于看起来的所有内容。我们最终得出：

<script type="text/javascript">
  $(document).ready(function() {
    $('#sltitles span').each(function() {
      $(this).css({right: '0'});
    });
    $('#sltitles').cycle({
      fx: 'fade'
    });
  });
</script>

也许这会帮助其他遇到同样问题的人。

Answer 2

Cycle 插件对图像使用绝对位置，还有 top: 0; 和 left: 0;，因此您必须编辑插件代码，因为它不是eplugin 的选项。

只需打开插件文件并搜索 left:0 并将其更改为 right:0 即可。

如果您更新插件，则只需再次执行此操作即可。

Answer 3

这是一个非常简单的直接 CSS 解决方案，不涉及破解插件或大量臃肿的额外 jQuery 代码。

p.slideshow img {
    left: auto !important;
    right: 0 !important;
}

这也适用于非图像幻灯片项目：

div.cycle-slide {
    left: auto !important;
    right: 0 !important;
}

Answer 4

我会尝试在 div 中浮动图像：

<div class="slideshow">
 <img src="31.jpg" alt="" />
 <img src="35.jpg" alt="" />
 <img src="36.jpg" alt="" />
</div>


div.slideshow {
position:absolute;
top:0;
right:0;
z-index:-999;
overflow:hidden;
background: url(images/stripe-bg.png) repeat;
margin:0;
padding:0;

/* width:;
height:;*/ }



 div.slideshow img { float:right: display:inline}