javascript 具有“响应宽度”、“固定高度”、“居中对齐”和“自动旋转”的图像滑块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15634680/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image Slider with "Responsive Width", "Fixed Height", "Center Aligned" and "Auto Rotate"
提问by user1830235
I need a full width (responsive) slider with fixed height and centered image ( the min width is 960px and people with a wider screens will see the rest of the image (the extra on the left and right)) and it needs to auto-rotate.
我需要一个具有固定高度和居中图像的全宽（响应式）滑块（最小宽度为 960 像素，屏幕较宽的人将看到图像的其余部分（左侧和右侧的额外部分））并且它需要自动-旋转。
Now I got the html/css worked out, but my javascript is rubbish so i have no idea how to let the images slide. I've checked out a lot of Questions here but nothing seems to work. My image dimensions are 2300x350.
现在我搞定了 html/css，但我的 javascript 是垃圾，所以我不知道如何让图像滑动。我在这里检查了很多问题，但似乎没有任何效果。我的图像尺寸是 2300x350。
CSS:
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:
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>
With this code the pictures come out nice in the middle on every screen but how do I let it slide and autorotate? I guess the first image just needs to be replaced by the second so a z-index change? or + or - the width of one picture?
使用此代码，图片在每个屏幕的中间都很好，但我如何让它滑动和自动旋转？我猜第一个图像只需要被第二个替换，这样 z-index 就会改变？或 + 或 - 一张图片的宽度？
回答by Jehanzeb.Malik
You need to only style the imgtag if using flexslider. Try the fiddle link below. I have included four files for this.
img如果使用flexslider，则只需要设置标签样式。试试下面的小提琴链接。我为此包含了四个文件。
- jQuery 1.9.1
- flexslider.css
- jquery.flexslider-min.js
- bg_direction_nav.png
- jQuery 1.9.1
- flexslider.css
- jquery.flexslider-min.js
- bg_direction_nav.png
回答by Mohammad Kashif
Please check this... http://www.jqueryscript.net/demo/Responsive-jQuery-Full-Width-Image-Slider-Plugin-responsiveSlides/it is full width and fixed height slider and auto rotate. Here you have options to styling according to your needs
请检查这个... http://www.jqueryscript.net/demo/Responsive-jQuery-Full-Width-Image-Slider-Plugin-responsiveSlides/它是全宽和固定高度滑块和自动旋转。在这里，您可以根据需要选择样式
$(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
}
]
});
});
For more modification please see jquery.responsiveSlides.js
更多修改请查看 jquery.responsiveSlides.js
