我使用了我的一个小插件:
我改变了一点你的 CSS,将每个图像(通过 jQuery)包装成<span>
元素。
这样做我可以使用 line-height 和一些你可以在我的 CSS 中找到的技巧来垂直和水平地居中你的图像:
.contentImages{
border:1px solid #CCC;
padding:10px;
margin:20px auto 0;
position:relative;
width: 675px;
height:200px; /* added */
overflow:hidden;
background:#fff;
}
.pics{
position:relative; /* added */
display:block; /* added */
float:left; /* added */
width:225px;
height:180px;
}
.pics img {
position:relative;
vertical-align:middle;
background-color: #eee;
max-width:100%;
}
.pics span{ /* created by jQuery */
cursor:pointer; /* yes, I made your images swappable */
position:absolute;
margin-left:0px;
height:200px;
width:225px;
text-align:center;
background:#444;
line-height:196px;
}
HTML:你所有的父元素现在都有一个通用类pics
来简化 CSS
<div class="pics pics1">
这是我的 jQuery 插件(fadeMe!):
/*FadeMe 'FPS'//jQuery_plugin//Author:Roko C.Buljan (2012)// www.roxon.in*/(function($){$.fn.fademe = function(F,P,S){F=F||700;S=S-1||0;P=P||3000;var E=this.children(),T;function a(){E.siblings(E).stop().fadeTo(F,0).eq(S=++S%E.length).stop().fadeTo(F,1);}E.on('mouseenter mouseleave click',function(e){var m=e.type==='mouseenter'?clearTimeout(T):(e.type==='click'?a():aa());}).hide().eq(S).show();function aa(){T=setTimeout(function(){a();aa();},F+P);}aa();};})(jQuery);
$('.pics img').each(function(){ // just added to wrap your images into spans.
$(this).wrap('<span />');
});
$('.pics1').fademe(1360,3500,2); //fadeTime,pause,StartSlideN
$('.pics2').fademe(1300); //fadeTime
$('.pics3').fademe(1240,3920); //fadeTime,pause
就这样。这个插件允许你:
- 在 HOVER 上停止悬停的幻灯片
- 点击前进
- 自定义淡入淡出时间、暂停和开始幻灯片N
默认设置为:
1.Fade time = 700,Pause = 3000,Start slide = 1;
您可以在我的页面上找到更多信息这里