jQuery 实现的幻灯轮播效果

很多人留言问我首页那个幻灯轮播的效果是怎么实现的，我真不知道怎么在短短几句留言里表达清楚一个幻灯的实现方法，而且我那个又是 flash 的，还要设置参数什么乱七八糟的东东，所以连我自己都不是很推荐使用这种 flash 的幻灯方法。今天就介绍一种 jQuery 实现的幻灯片轮播方法。选择 jQuery 的原因很简单，如果整站使用越多的 jQuery 效果，那也就越值，因为可以充分利用这个 jQuery 库了。

先来看看 DEMO 吧。具体方法如下：

1、HTML 部分：

<div id= "slide" >
    <div id= "slide_bg" ></div>
    <div id= "slide_info" ></div>
    <ul><li> 1 </li><li> 2 </li><li> 3 </li><li> 4 </li></ul>
    <div id= "slide_list" >
        <a href= "#" ><img src= "images/slide_1.jpg" alt= "幻灯一" /></a>
        <a href= "#" ><img src= "images/slide_2.jpg" alt= "幻灯二" /></a>
        <a href= "#" ><img src= "images/slide_3.jpg" alt= "幻灯三" /></a>
        <a href= "#" ><img src= "images/slide_4.jpg" alt= "幻灯四" /></a>
    </div>
</div>

2、CSS 部分：

#slide { width : 296px; height : 205px; margin-bottom : 10px; border : 1px solid #DCDCDC; overflow : hidden; position : relative; font-size : 12px ;}
#slide_list img { width : 288px; height : 197px; border : 1px solid #707070; margin : 3px ;}
#slide_bg { width : 290px; height : 40px; background : #000; position : absolute; bottom : 3px; left : 3px; z-index : 1; opacity : 0 . 3; filter : Alpha( Opacity = 30 );}
#slide_info { line-height : 40px; color : #fff; cursor : pointer; position : absolute; bottom : 3px; left : 12px; z-index : 2 ;}
#slide ul { line-height : 15px; margin : 0; padding : 0; position : absolute; bottom : 3px; right : 3px; z-index : 3; opacity : 0 . 8; filter : Alpha( Opacity = 80 );}
#slide ul li { padding : 0px 8px; float : left; display : block; color : #fff; border-left : 1px solid #fff; border-right : 1px solid #4C4B4B; cursor : pointer; font-family : Georgia ;}

3、加载 jQuery。如果还不知道什么是 jQuery，或者不知道怎么加载 jQuery 的童鞋可以去 Google 一下，本文不多介绍了。

4、执行脚本部分：

var t = n = count = 0;
$( function (){
    count = $( "#slide_list a" ). size();
    $( "#slide_list a:not(:first-child)" ). hide();
    $( "#slide_info" ). html( $( "#slide_list a:first-child" ). find( "img" ). attr( 'alt'));
    $( "#slide ul li:first-child" ). css ({ "background" : "#CE0609" , 'color' : '#fff' });
    $( "#slide_info" ). click( function (){ window . open( $( "#slide_list a:first-child" ). attr( 'href' ), "_blank" )});
    $( "#slide ul li" ). click( function() {
        var i = $( this ). text() - 1;
        n = i;
        if ( i >= count) return;
        $( "#slide_info" ). html( $( "#slide_list a" ). eq( i ). find( "img" ). attr( 'alt'));
        $( "#slide_info" ). unbind (). click( function (){ window . open( $( "#slide_list a" ). eq( i ). attr( 'href' ), "_blank" )})
        $( "#slide_list a" ). filter( ":visible" ). fadeOut( 500 ). parent (). children (). eq( i ). fadeIn( 1000);
        $( this ). css ({ "background" : "#CE0609" , 'color' : '#fff' }). siblings (). css ({ "background" : "none" , 'color' : '#fff' });
    });
    t = setInterval( "showAuto()" , 4000);
    $( "#slide" ). hover( function (){ clearInterval( t )}, function (){ t = setInterval( "showAuto()" , 4000 );});
})
function showAuto (){
    n = n >= ( count - 1) ? 0 : n + 1;
    $( "#slide ul li" ). eq(n ). trigger( 'click');
}

这段脚本也挺好理解，至少看懂应该不难吧，所以也不多解释了，方法来自网络，是我早年收藏的，是一个挺实用的方法，无论在 IE 还是在 Firefox 等浏览器下都能表现良好。有用幻灯片习惯的小盆友们不妨一试。（转自http://wange.im/jquery-for-slide.html）

转载于:https://www.cnblogs.com/tjmsz/archive/2011/11/11/2245858.html