我们来看下如何利用css+jquery打造一个纯手工的轮播图。

首先是html页面代码：

<div class="slidePics">
        <ul class="pics">
            <li><img src="images/1.jpg" alt=""></li>
            <li><img src="images/2.jpg" alt=""></li>
            <li><img src="images/3.jpg" alt=""></li>
            <li><img src="images/4.jpg" alt=""></li>
            <li><img src="images/5.jpg" alt=""></li>
            <li><img src="images/6.jpg" alt=""></li>
        </ul>
        <ul class="nav">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

然后是css样式：

<style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .slidePics .pics{
            list-style: none;
        }
        .slidePics{
            width: 800px;
            height: 400px;
            border: #999 solid 1px;
            position: relative;
            overflow: hidden;
        }
        .slidePics .pics{
            position: absolute;
            width:4800px;
            height: 100%;
            left:0;
            top: 0;
        }
        .slidePics .pics li{
            float: left;
            width:800px;
            height: 100%;
        }
        .slidePics .pics li img{
            width: 100%;
            height: 100%;
        }
        .slidePics .nav{
            position: absolute;
            bottom: 10px;
            left: 10px;
            padding: 10px;
            list-style: none;
            border-radius: 5px;
        }
        .slidePics .nav li{
            float: left;
            width: 40px;
            height: 10px;
            background-color: #FFF;
            margin: 5px;
            border-radius: 3px;
            opacity: 0.6;
            cursor: pointer;
        }
        .slidePics .nav li.cur{
            opacity: 1;
        }
    </style>

最后是Jquery代码：

<script type="text/javascript">
        var cur=0;
        var timeId;
        function initSlide(){
             $(".nav li").mouseover(function(){
               cur=$(this).index();
               refershPics();
               clearInterval(timeId);
            });
            $(".nav li").mouseleave(function(){
                auto();
            });
        }
        function refershPics(){
            $(".nav li").removeClass("cur");
            $(".nav li").eq(cur).addClass("cur");
           // $(".pics li").hide();
            //$(".pics li").eq(cur).fadeIn();
            $(".pics").animate({left:-cur*800},1000);
        }
        function auto(){
            timeId=setInterval(function(){
              cur++;
              if(cur>=$(".pics li").length){
                  cur=0;
              }
              refershPics();
            },2000);
        }
        $(function(){
           initSlide();
           refershPics();
            auto();
        });
    </script>

最后：可以直接复制代码，经过调试可以正常运行。（附：不要忘记引用Jquery的库文件。）

效果图：