0

jquery サイクルを使用して、ページ上のいくつかの画像を回転させようとしています。画像の幅は 1400 ピクセルです。これは、画面解像度が小さい人にとっては、画像の右側が消えてしまうことを意味します。

画像が画像の両側で同じ量を失うようにして、画像の中心を表示ウィンドウの中心に保つようにしたいと思います。

http://renegadeox.com/を見て、ブラウザ ウィンドウのサイズを変更すると、私の言いたいことがわかるでしょう。

javascript を使用して画像をコンテナに対して左に移動し、画像を中央に保つにはどうすればよいですか?

完全を期すためのコードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
</head>
<body>
    <script type="text/javascript">
    $(document).ready(function() {
        $('.slideshowWrap').cycle({
            fx: 'fade', // http://malsup.com/jquery/cycle/ Background rotater
        });
    });
    </script>
    <div style="margin: 0 auto" class="slideshowWrap">
        <div class="homeslideshow">
            <img src="background_01.jpg" alt="" />    
        </div>
        <div class="homeslideshow">
            <img src="background_02.jpg" alt="" />    
        </div>
        <div class="homeslideshow">
            <img src="background_03.jpg" alt="" />    
        </div>
    </div>
</body>
</html>
4

2 に答える 2

1

サイクル プラグインのカスタム トランジションを使用して、独自のメソッドを定義し、このコードを使用して正しい左の値を計算できます。

編集

このコードを試してみましたが、機能しますが、これは load イベントでのみ機能し、サイズ変更では機能しません。関数全体をサイズ変更イベントにバインドすると、目的の効果が得られる可能性があります

少しCSSを追加する必要があります：

<style>
.slideshowWrap{
    width:100% !important;
    overflow:hidden;
}
</style>

そして、これは私のために働いたjsです: 

$(document).ready(function() {
var leftVal = 0;
    if($(window).width()<1400){
        leftVal = ((1400 - $(window).width())/2)*-1;
    }

    $('.slideshowWrap').cycle({
        fx:      'custom',
        cssBefore: { 
            left: leftVal, 
            top:  0,  
            opacity: 1,
    display: 'block'
        },
        animOut: { 
            opacity: 0 
        },
        animIn: { 
            left: leftVal, 
            top: 0, 
        },
        cssAfter: { 
            zIndex: 0
        },
    cssFirst: {
    left: leftVal
    },
        delay: -3000
    });
});
</script>

上記のコードで目的の効果が得られると思いますが、少なくともこれを達成する方法のアイデアではないにしても、お役に立てば幸いです!! これは、サイクルカスタム fx http://jquery.malsup.com/cycle/adv.htmlに関する完全なドキュメントへのリンクです。

于 2013-09-25T20:50:19.197 に答える