4

私はこの問題を抱えており、どこにも解決策が見つかりません....

1 つの div 内に 3 つの div があり、これらの 3 つの div にはそれぞれ 3 つの画像があり、それらはすべて並んでいます。jQuery サイクルを使用して 3 つのスライドショーを作成しました。それは完璧に機能します。ここでわかるように、一部の画像は中央に配置する必要があります

http://jsfiddle.net/rBaWG/19/

また

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

私はすべてを試しましたが、jQueryサイクルがCSSコードを調整してこれらの画像を中央に配置しているようです。これを修正する方法を知っている人はいますか?

4

6 に答える 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;
}

少なくともChromeでは、水平方向に中央揃えされた画像に対してjsFiddleが機能します。質問: 3 つの画像を並べて表示しますか、それとも重ねて表示しますか?

並べて表示したい場合は、上記の CSSwidthのクラスからを削除する必要があります。.pics

于 2012-05-03T16:04:46.830 に答える
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の追加：

.cc img{
    margin: auto;
}
.cc{
    text-align:center;
    width:225px !important;
    overflow:hidden;
}
于 2012-05-11T14:08:39.567 に答える
2

これが私がそれを行う方法であり、jQueryの魔法で画像にマージンを追加し、containerResize次のようにCycleのオプションを使用して、コンテナーが常に最大の画像と同じサイズになるようにします。

$('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
});

これがデモンストレーションです！

またはVERTICALDEMO！

于 2012-05-10T14:57:35.697 に答える
1

いくつかの div を循環させ、画像を div の中央に配置する方がよい場合があります。

http://jsfiddle.net/lucuma/wHLJD/

于 2012-05-07T03:30:33.457 に答える
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
});
于 2012-05-11T07:34:00.787 に答える
1

私は私の小さなプラグインを使用しました：

jsFiddle デモ

CSS を少し変更し、各画像を (jQuery 経由で)<span>要素にラップしました。
そうすることで、CSS で見つけることができる line-height といくつかのトリックを使用して、垂直方向と水平方向の両方で画像を中央に配置できます。

.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;
}

picsHTML: 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

それで全部です。このプラグインにより、次のことが可能になります。

  • HOVER でホバーしたスライドを停止
  • クリックして進みます
  • フェード時間のカスタマイズ、一時停止、スライドNの開始

デフォルト設定は次のとおりです。1.
フェード時間 = 700、一時停止 = 3000、スライド開始 = 1。

こちらのマイページで詳細を確認できます

于 2012-05-08T20:41:03.893 に答える