logo标签列表

无法在Jquery Cycle幻灯片中居中我的图片

jqueryjquery-cycle
4
我有一个问题，无论在哪里都找不到解决方案...
我有1个div内部有3个div，每个div中各有3张图片并且它们并排放置。我使用jQuery cycle制作了3个幻灯片，效果很完美。但是有些图片需要居中，就像你在这里看到的一样。
http://jsfiddle.net/rBaWG/19/

或者

http://www.willruppelglass.com/index.php

我已经尝试了很多方法，但似乎jQuery Cycle插件会调整我的CSS代码，使这些图片居中显示。有没有人知道如何解决这个问题？

2
你尝试了<center>，这很糟糕！ - JonH
你在谷歌上搜索过吗？像这个网址 http://webdesign.about.com/od/beginningcss/a/aa012207.htm ？你需要水平还是垂直居中？根据你想要实现的效果，你可能需要包装图片。 - Dennis Hunink
我刚刚创建了两个带有三张图片的div，并且我放置了style: text-align: center;，它为我居中对齐了。请确保清除浏览器缓存/历史记录或按Ctrl + F5刷新。 - JonH
那么，top: 0; left: 0。它有什么作用？ - shadowhorst
@user979331 这里的任何答案对您有用吗？ - lucuma
显示剩余4条评论
6个回答
5

试一试这个：

.pics {  
    padding: 0;  
    margin: 0 auto; /* CHANGE HERE */
    width: 225px;
    height: 200px;
} 

.pics img {    
    background-color: #eee;
    /* Removed top and left */
}

.contentImages {
    text-align: center; /* Add */
    border: 1px solid #CCC; 
    padding: 10px; 
    margin: 20px auto 0; 
    position: relative;
    width: 675px;
    overflow: hidden;
}

使用jsFiddle在Chrome中实现水平居中的图片。问题：您想让这三张图片并排还是垂直排列？

如果您想要它们并排，您需要从上面的CSS中删除.pics类的width属性。

这个没有起作用 :( 但是我已经将它应用到了我的代码中，你可以在http://willruppelglass.com/index.php上查看，这样就能知道我正在处理什么了。 - user979331
@user1193385：你正在使用的JS循环器将动态修改元素的CSS和定位。我不确定有什么办法。被循环的图像都是不同大小的，这使问题更加复杂。如果您想得到与图像循环相适应的答案，您可能需要描述您想要的外观和行为。 - Cᴏʀʏ
@Cory 在Chromium中，jsfiddle链接无法正常工作。Cycle插件使用内联CSS覆盖了CSS样式。 - ArtBIT
3
我已经尝试并测试过这个，它按要求工作：
HTML：
<div class="contentImages">
    <div class="pics">
        <div class="cc"><img src="http://www.willruppelglass.com/upload/home1.jpg" height="200"/></div>
        <div class="cc"><img src="http://www.willruppelglass.com/upload/home2.jpg" height="200"/></div>
        <div class="cc"><img src="http://www.willruppelglass.com/upload/home3.jpg" height="200"/></div>
    </div>
    <div class="pics2">
        <div class="cc"><img src="http://www.willruppelglass.com/upload/home5.jpg" width="225"/></div>
        <div class="cc"><img src="http://www.willruppelglass.com/upload/home4.jpg" height="200"/></div>
        <div class="cc"><img src="http://www.willruppelglass.com/upload/home6.jpg" height="200"/></div>
    </div>
    <div class="pics3">
        <div class="cc"><img src="http://www.willruppelglass.com/upload/home7.jpg" height="200"/></div>
        <div class="cc"><img src="http://www.willruppelglass.com/upload/home8.jpg" height="200"/></div>
        <div class="cc"><img src="http://www.willruppelglass.com/upload/home9.jpg" height="200"/></div>
    </div>
</div>

CSS Addition:
.cc img{
    margin: auto;
}
.cc{
    text-align:center;
    width:225px !important;
    overflow:hidden;
}
2

以下是我的做法，通过使用jQuery的一些技巧为图像添加margin，并使用Cycle中的containerResize选项确保容器始终与最大图像相同大小：

$('img').each(function() {
    var left = ($(this).parent().width() / 2) - ($(this).width() / 2);
    var top = ($(this).parent().height() / 2) - ($(this).height() / 2);
    $(this).css({marginLeft: left, marginTop: top});
});

$('.pics').cycle({
    fx: 'fade',
    timeout:5000,
    containerResize: 1,
    nowrap: 0,
    random: 1,
});

$('.pics2').cycle({
    fx: 'fade',
    timeout: 8000,
    containerResize: 1,
    nowrap: 0,
    random: 1
});

$('.pics3').cycle({
    fx: 'fade',
    timeout: 6000,
    containerResize: 1,
    nowrap: 0,
    random: 1
});

这是一个演示！或者一个垂直演示！
1
1

我使用了我的一个小插件：

jsFiddle演示

我稍微修改了你的CSS，通过jQuery将每个图像包装在<span>元素中。
这样做，我可以使用行高和一些技巧在我的CSS中找到的方法来垂直和水平居中你的图像：

.contentImages{
    border:1px solid #CCC;
    padding:10px;
    margin:20px auto 0;
    position:relative;
    width: 675px;
    height:200px; /* added */
    overflow:hidden;
    background:#fff;
}
.pics{  
    position:relative; /* added */
    display:block; /* added */
    float:left; /* added */
    width:225px;
    height:180px;
}
.pics img {
    position:relative;
    vertical-align:middle;
    background-color: #eee;
    max-width:100%;
}
.pics span{    /* created by jQuery */
    cursor:pointer;  /* yes, I made your images swappable */
    position:absolute;
    margin-left:0px;
    height:200px;
    width:225px;
    text-align:center;
    background:#444;
    line-height:196px;
}

HTML：现在您的所有父元素都具有共同的类pics，以简化CSS。

<div class="pics pics1">

这是我的jQuery插件（fadeMe!）：
/*FadeMe 'FPS'//jQuery_plugin//Author:Roko C.Buljan (2012)// www.roxon.in*/(function($){$.fn.fademe = function(F,P,S){F=F||700;S=S-1||0;P=P||3000;var E=this.children(),T;function a(){E.siblings(E).stop().fadeTo(F,0).eq(S=++S%E.length).stop().fadeTo(F,1);}E.on('mouseenter mouseleave click',function(e){var m=e.type==='mouseenter'?clearTimeout(T):(e.type==='click'?a():aa());}).hide().eq(S).show();function aa(){T=setTimeout(function(){a();aa();},F+P);}aa();};})(jQuery);

$('.pics img').each(function(){ // just added to wrap your images into spans.
  $(this).wrap('<span />');
});

$('.pics1').fademe(1360,3500,2); //fadeTime,pause,StartSlideN
$('.pics2').fademe(1300);        //fadeTime
$('.pics3').fademe(1240,3920);   //fadeTime,pause

就是这样。而且这个插件可以让你：

  • 在悬停时停止滑动
  • 点击以前进
  • 自定义淡入时间、暂停和开始幻灯片N

默认设置为：
1.淡入时间=700，暂停=3000，开始幻灯片=1；

您可以在我的页面这里找到更多信息。

1

将图像居中在图像 div 上的代码：

$('.pics').cycle({
    fx: 'fade',
    timeout:5000,
    random: 1,
    height: 200,
    width: 225,
    center: true
});

$('.pics2').cycle({
    fx: 'fade',
    timeout: 8000,
    random: 1,
    height: 200,
    width: 225,
    center: true
});

$('.pics3').cycle({
    fx: 'fade',
    timeout: 6000,
    random: 1,
    height: 200,
    width: 225,
    center: true
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接