非常酷的jQuery/HTML5圖片滑塊特效 帶彈性菜單

新的一周剛剛開始，當我迷迷糊糊坐在辦公桌前時，又不自主的去看了一些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中只能看到基本的滑塊效果。最后附上源碼。下載地址>>