3

高さが固定され、画像が中央に配置された全幅 (レスポンシブ) スライダーが必要です (最小幅は 960 ピクセルで、より広い画面を使用している人には画像の残りの部分 (左右の余分な部分) が表示されます) で、自動化する必要があります。回転します。

これで、html/css が完成しましたが、JavaScript がゴミなので、画像をスライドさせる方法がわかりません。ここで多くの質問をチェックアウトしましたが、何も機能していないようです。私の画像のサイズは 2300x350 です。

CSS:

body {
    margin: 0 auto;
}

#slider_container {
    width:100%;
    height:350px;
    overflow:hidden;
    position: relative;
    z-index: 1;
}

.image {
    position:relative;
    float:left;
    height: 350px;
    width: 100%;
    overflow: hidden;
}

.image img {   
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-1150px;
    margin-top:-175px;
}

HTML:

<div id="slider_container">
    <div class="image">
        <img src="images/header.jpg" />
    </div>
    <div class="image">
        <img src="images/header2.jpg"/>
    </div>
    <div class="image">
        <img src="images/header3.jpg" />
    </div>
</div>

このコードを使用すると、すべての画面で画像が中央にきれいに表示されますが、スライドして自動回転させるにはどうすればよいですか? 最初の画像を2番目の画像に置き換えるだけでいいので、z-indexを変更しますか? または + または - 1 つの画像の幅?

4

2 に答える 2

1

flexsliderimgを使用する場合にのみ、タグのスタイルを設定する必要があります。以下のフィドルリンクを試してください。このために 4 つのファイルを含めました。

  • jQuery1.9.1
  • flexslider.css
  • jquery.flexslider-min.js
  • bg_direction_nav.png

jsfiddle

于 2013-03-26T11:57:23.357 に答える
0

これを確認してください. ここでは、ニーズに応じてスタイリングするオプションがあります

$(function(){

    var p=$('#content').responsiveSlides({
        height:450,                     // slides conteiner height
        background:'#fff',              // background color and color of overlayer to fadeout on init
        autoStart:true,                 // boolean autostart
        startDelay:0,                   // start whit delay
        effectInterval:5000,            // time to swap photo
        effectTransition:1000,          // time effect
        pagination:[
            {
                active:true,            // activate pagination
                inner:true,             // pagination inside or aouside slides conteiner
                position:'B_R',         /* 
                                            pagination align:
                                                T_L = top left
                                                T_C = top center
                                                T_R = top right

                                                B_L = bottom left
                                                B_C = bottom center
                                                B_R = bottom right
                                        */
                margin:10,              // pagination margin
                dotStyle:'',            // dot pagination class style
                dotStyleHover:'',       // dot pagination class hover style
                dotStyleDisable:''      // dot pagination class disable style
            }
        ]
    });

});

さらに変更するには、jquery.responsiveSlides.js を参照してください。

于 2015-06-16T15:20:09.330 に答える