javascript - 带有 "Responsive Width"、 "Fixed Height"、 "Center Aligned"和 "Auto Rotate"的图像 slider

Question

我需要一个具有固定高度和居中图像的全宽(响应式) slider (最小宽度为 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>

使用这段代码，图片在每个屏幕的中间都很好，但是 我如何让它滑动和自动旋转？我想第一张图片只需要用第二张图片替换，所以 z-index 会发生变化？或 + 或 - 一张图片的宽度？

Answer 1

如果使用 flexslider，您只需要设置 img 标签的样式。试试下面的 fiddle 链接。为此，我包含了四个文件。

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

jsfiddle