jQuery循环-将图像与右侧的不同维度对齐?
我有一个幻灯片(jquery循环),我用它作为网站的背景。问题是,我想把右边的照片对齐,它们有不同的调光,出于某种原因,那些宽度最小的照片没有对齐到右边。。。我试着把img分为几个部分,比如互联网上的个人建议和不同的东西,但都没有用。不编辑插件就可以吗 HTML:jQuery循环-将图像与右侧的不同维度对齐?,jquery,css,css-float,jquery-cycle,Jquery,Css,Css Float,Jquery Cycle,我有一个幻灯片(jquery循环),我用它作为网站的背景。问题是,我想把右边的照片对齐,它们有不同的调光,出于某种原因,那些宽度最小的照片没有对齐到右边。。。我试着把img分为几个部分,比如互联网上的个人建议和不同的东西,但都没有用。不编辑插件就可以吗 HTML: <p class="slideshow"> <img src="31.jpg" alt="" /> <img src="35.jpg" alt="" /> <img src=
<p class="slideshow">
<img src="31.jpg" alt="" />
<img src="35.jpg" alt="" />
<img src="36.jpg" alt="" />
</p>
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%;*/
}
你有什么线索可以让它们都向右对齐吗
谢谢,
Cris我会尝试在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}
幻灯片放映{
位置:绝对位置;
排名:0;
右:0;
z指数:-999;
溢出:隐藏;
背景:url(image/stripe bg.png)重复;
保证金:0;
填充:0;
/*宽度:;
高度:;*/}
div.slideshow img{float:right:display:inline}
Cycle插件对图像使用绝对位置,也顶部:0代码>和左:0
,因此您必须编辑插件代码,因为它不是eplugin选项的一部分
只需打开插件文件并搜索left:0
,然后将其更改为right:0
如果更新插件,您只需再次执行此操作。我在尝试右对齐容器中的某些内容时也遇到了此问题。这个解决方案对我们有效:
$('#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>
$(文档).ready(函数(){
$('#slspan')。每个(函数(){
$(this.css({right:'0'});
});
$('#sltitles')。循环({
外汇:“褪色”
});
});
也许这会帮助其他有同样问题的人。这里有一个非常简单的直接css解决方案,它不需要破解插件或大量多余的jQuery代码
p.slideshow img {
left: auto !important;
right: 0 !important;
}
这也适用于非图像幻灯片项目:
div.cycle-slide {
left: auto !important;
right: 0 !important;
}
浮动图像不适用于循环,因为图像完全由插件定位。这是一个很酷的解决方案。谢谢如果我想垂直对齐不同尺寸的幻灯片图像,我只会在“margin:0 auto”中使用相同的解决方案,对吗?如果你只需要css就可以了,为什么还要在客户端添加额外的jquery来处理呢?不要攻击cycle插件,有更好的方法可以轻松地升级插件。