banner全屏特效切换

写的一个banner全屏特效切换的案例，以及制作它运用了哪些jquery内置方法。

<!--显示索引图片,并把同级兄弟图片隐藏起来-->
$(".content-banner .imgList").eq(0).show().siblings("div").hide();
$(".content-banner .btn li").mouseover(function () {
    clearInterval(timer);         //当鼠标滑动时，则停止定时任务
    var _index = $(this).index();//获取当前索引（相对应的位置）
    $(this).addClass("hover").siblings().removeClass("hover");
    /*当鼠标滑动到li相对应的位置上面，则添加一个样式（小圆点）*/
    $(".content-banner .imgList").eq(_index).fadeIn(1000).siblings("div").fadeOut(1000);
    /*相对应的背景图片显示和隐藏*/
}).mouseout(function () {//当鼠标离开时，则执行定时任务
    setInterval(autoPlay());
});
var _index = 0;
var timer = null;
//       定义一个定时任务;
function autoPlay() {
    timer = setInterval(function () {
        _index++;
        if (_index < 4) {
            if (_index == 3) {
                _index = -1;
            }
            $(".content-banner .imgList").eq(_index).fadeIn(1000).siblings("div").fadeOut(1000);
            $(".content-banner li").eq(_index).addClass("hover").siblings().removeClass("hover");
        }
    }, 3000);
}

<div class="content-banner" title="header-img">
    <div class="imgList" style="background: url(1.png) top center no-repeat"></div>
    <div class="imgList" style="background: url(2.png) top center no-repeat"></div>
    <div class="imgList" style="background: url(3.png) top center no-repeat"></div>
    <div class="imgList" style="background: url(4.png) top center no-repeat"></div>
    <ul class="btn">
        <li class="hover" dl="1"></li>
        <li dl="2"></li>
        <li dl="3"></li>
        <li dl="4"></li>
    </ul>
    <div style="clear: both"></div>
</div>

思路：

注：这里说的是JS中的思路，至于布局的话，可以下载源码自己研究。

第一步、让切换按钮动起来

上图中有4个小切换按钮，当鼠标每滑动到一个切换按钮的位置，则相对应的添加一个样式。（一个橘黄色的小圆点）

第二步、让图片动起来

当滑动每个相对应切换按钮时，我们的背景图片也需要随着切换。

第三步、让它自动切换

当鼠标没有滑动到切换按钮时，则让它自动切换，这里需定义一个定时任务。（setInterval）

根据上图jquery代码中，下面总结了此次特效所用到的方法：

eq()方法;寻找当前索引

mouseover()方法；当鼠标滑动到元素上方，则发生该事件

mouseout()方法;当鼠标离开时，则发生该事件

index()方法;查找索引值

addClass()方法;添加样式

sibling()方法;获取当前元素的同辈其他元素

fadeIn()方法;淡入

fadeOut()方法;淡出

以及javascript中的setInterval()方法;定义一个定时任务。和clearInterval()方法;停止定时任务

    点击预览  本地下载

写在最后：觉得不管做什么事情,思路非常重要，如果没有思路就不知道如何下手。就像开发一个网站一样，如果你不知道它的开发流程是什么？那么你肯定很迷茫，网站如何去做？第一步该怎么下手。这样你就会认为做一个网站很难。同样的道理：学习jquery首先我认为得明白每个方法是什么含义，只有先明白了这些方法的含义，以及怎么去使用。在项目实战的时候你才不会迷茫