新的一周刚刚开始，当我迷迷糊糊坐在办公桌前时，又不自主的去看了一些jQuery和HTML5的应用插件，今天我们来看一款非常酷的jQuery/HTML5图片滑块特效，这款插件的特点是图片上不错的弹性菜单，鼠标滑过菜单时可以弹出一张半透明的图片。先来看看效果图。
我们可以在这里看到生动的DEMO演示。
当然，我们光看效果是不行的，还是一起来简单地分析一下实现的源码。
首先是使用最简单的HTML代码来构造这个带菜单的图片滑块框架：
<div id="slider-wrapper">
<div id="dots">
<ul>
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
<div id="arrow-left" class="nav-arrow"></div>
<div id="image-slider">
<ul>
<li class="active-img"><img src="sunset.jpg" alt="" /></li><li><img src="lele.jpg" alt="" /></li><li><img src="logo.jpg" alt="" /></li>
</ul>
<div id="nav-bar">
<a href="#"><div><img src="thumb-web.jpg" /></div>Web</a><a href="#"><div><img src="thumb-print.jpg" /></div>Print</a><a href="#"><div><img src="thumb-logo.jpg" /></div>Logos</a><a href="#"><div><img src="thumb-photo.jpg" /></div>Photos</a>
</div>
</div>
<div id="arrow-right" class="nav-arrow"></div>
</div>
下面是CSS3代码，主要是对左右箭头、图片阴影效果的渲染，这里贴一下核心的CSS代码：
.nav-arrow{
width: 46px;
height: 343px;
display: inline-block;
*display: inline;
zoom: 1.0;
cursor: pointer;
}
#arrow-left{
background: url(arrow-left.png) center center no-repeat;
}
#arrow-right{
background: url(arrow-right.png) center center no-repeat;
}
#arrow-right:hover, #arrow-left:hover{
background-color: #1e2225;
}
#image-slider{
width: 923px;
height: 343px;
position: relative;
margin-top: 10px;
overflow: hidden;
display: inline-block;
*display: inline;
zoom: 1.0;
}
#slider-wrapper:before{
content: '';
width: 974px;
height: 52px;
display: block;
position: absolute;
left: 50%;
margin-left: -487px;
top: 375px;
background: url(shadow.png) center center no-repeat;
}
重点是jQuery代码，下面的jQuery代码就实现了图片的滑块动画以及鼠标滑过菜单时的弹性动画效果：
$(function(){
var sliderInterval = setInterval(function() {
nextImg();
}, 7000);
$('.nav-arrow').click(function(){
if($(this).attr('id') == 'arrow-left'){
prevImg();
}else{
nextImg();
}
clearInterval(sliderInterval);
});
$('#dots li').click(function(){
var thisIndex = $(this).index()
if(thisIndex < $('#dots li.active').index()){
prevDot(thisIndex);
}else if(thisIndex > $('#dots li.active').index()){
nextDot(thisIndex);
}
$('#dots li.active').removeClass('active');
$(this).addClass('active');
clearInterval(sliderInterval);
});
})
function prevImg(){
var curIndex = $('#image-slider li.active-img').index();
if(curIndex == 0){
$('#image-slider li:last-child').addClass('next-img').animate({
left: 0
}, function(){
$('#image-slider li.active-img').removeClass('active-img').css('left', '-923px');
$('#image-slider li.next-img').attr('class', 'active-img');
var nextIndex = $('#image-slider li.active-img').index();
$('#dots li.active').removeClass('active');
$('#dots li').eq(nextIndex).addClass('active');
});
}else{
$('#image-slider li.active-img').prev().addClass('next-img').animate({
left: 0
}, function(){
$('#image-slider li.active-img').removeClass('active-img').css('left', '-923px');
$('#image-slider li.next-img').attr('class', 'active-img');
var nextIndex = $('#image-slider li.active-img').index();
$('#dots li.active').removeClass('active');
$('#dots li').eq(nextIndex).addClass('active');
});
}
}
function nextImg(){
var curIndex = $('#image-slider li.active-img').index();
if(curIndex == $('#image-slider li').length - 1){
$('#image-slider li:first-child').addClass('next-img').css('left', 923).animate({
left: 0
}, function(){
$('#image-slider li.active-img').removeClass('active-img').css('left', '-923px');
$('#image-slider li.next-img').attr('class', 'active-img');
var nextIndex = $('#image-slider li.active-img').index();
$('#dots li.active').removeClass('active');
$('#dots li').eq(nextIndex).addClass('active');
});
}else{
$('#image-slider li.active-img').next().addClass('next-img').css('left', 923).animate({
left: 0
}, function(){
$('#image-slider li.active-img').removeClass('active-img').css('left', '-923px');
$('#image-slider li.next-img').attr('class', 'active-img');
var nextIndex = $('#image-slider li.active-img').index();
$('#dots li.active').removeClass('active');
$('#dots li').eq(nextIndex).addClass('active');
});
}
}
function prevDot(newIndex){
$('#image-slider li').eq(newIndex).addClass('next-img').animate({
left: 0
}, function(){
$('#image-slider li.active-img').removeClass('active-img').css('left', '-923px');
$('#image-slider li.next-img').attr('class', 'active-img');
});
}
function nextDot(newIndex){
$('#image-slider li').eq(newIndex).addClass('next-img').css('left', 923).animate({
left: 0
}, function(){
$('#image-slider li.active-img').removeClass('active-img').css('left', '-923px');
$('#image-slider li.next-img').attr('class', 'active-img');
});
}
非常简洁的JS代码。
最后声明一下，在IE6.7.8中只能看到基本的滑块效果。最后附上源码。下载地址>>