Javascript 带“的图像滑块”；“响应宽度”&引用；“固定高度”&引用；“居中对齐”；及；“自动旋转”；

我需要一个全宽（响应）滑块，具有固定高度和居中图像（最小宽度为960px，屏幕更宽的人将看到图像的其余部分（左侧和右侧的额外部分）），它需要自动旋转

现在我已经完成了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;
}

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

HTML:

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

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

使用这个代码，图片在每个屏幕的中间显示得很好。

---

如何让它滑动并自动旋转？我猜第一张图片需要被第二张图片替换，所以z索引改变了吗？或+或-一张图片的宽度

如果使用flexslider，则只需设置

img

标记的样式。试试下面的小提琴链接。我已经为这个包含了四个文件

• jQuery 1.9.1
• flexslider.css
• jquery.flexslider-min.js
• bg_direction_nav.png

请检查此。。。它是全宽和固定高度滑块和自动旋转。在这里，您可以根据自己的需要选择样式

$(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

为什么不使用滑块插件？Flexslider将为它们设置动画，且不超过4行。你甚至不需要为此编写css。我现在正在尝试flexslider，但是我无法让代码完全工作：/i我尝试了这个

$（function（）{$（'#slides'）.slidesjs（{width:2300，height:350}）；}）但它不起作用，您不能将宽度设置为100%thx！但是我用jquery循环插件得到了结果，比我想象的要简单！