曾经见过一些优秀的jQuery导航，你有想自己创建一个的冲动么？ 这篇教程是教你怎样建立拥有顺畅动画效果的菜单。

1.在head头文件里引入CSS文件

例如：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link type="text/css" rel="stylesheet" href="css/style.css" />

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" src="js/common.js"></script>

2.在body标签里面将代码粘贴过来

<div class="box">

    <div class="banner">

        <div class="mybox">

            <div class="fPics" id="fPics">

                <a href="" style="opacity:1;z-index:1;">

                    <img src="images/banner_01.jpg"/>

                </a>

                <a href="">

                    <img src="images/banner_02.jpg"/>

                </a>

                <a href="">

                    <img src="images/banner_03.jpg"/>

                </a>

                <a href="">

                    <img src="images/banner_04.jpg"/>

                </a>

                <a href="">

                    <img src="images/banner_05.jpg"/>

                </a>

            </div>

            <ul class="fBtns" id="fBtns">

                <li class="rli1">

                    <span style="width:4px"></span>

                    <a href="#"></a>

                </li>

                <li class="rli2">

                    <span style="width:4px"></span>

                    <a href="#"></a>

                </li>

                <li class="rli3">

                    <span style="width:4px"></span>

                    <a href="#"></a>

                </li>

                <li class="rli4">

                    <span style="width:4px"></span>

                    <a href="#"></a>

                </li>

                <li class="rli5">

                    <span style="width:4px"></span>

                    <a href="#"></a>

                </li>

            </ul>

        </div>

    </div>

</div>

<script>

    new Bmove("#fBtns","#fPics");

</script>