我需要一个具有固定高度和居中图像的全宽(响应)滑块(最小宽度为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会发生变化?或+或 - 一张图片的宽度?
答案 0 :(得分:1)
如果使用 flexslider ,则只需设置img
标记的样式。尝试下面的小提琴链接。我已经包含了四个文件。
<强> jsfiddle 强>
答案 1 :(得分:0)
请检查此... 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
}
]
});
});
有关更多修改,请参阅jquery.responsiveSlides.js