简单图片banner轮播

/**************【css】****************/

　　  <style type="text/css">
        　　*{margin:0px;padding:0px;}

　　　　　.banner{width:100%;height:300px;background:rgb(63,12,9);position:relative;}
        　　.cont{width:760px;height:300px;margin:0px auto;background:#cc9999;position:relative;}
        　　.cont ul li{list-style-type:none;width:760px;height:300px;position:absolute;top:0px;left:0px;display:none;}
        　　.cont .prev{width:50px;height:55px;position:absolute;top:100px; left:0px;background:url("images1/button-prev-next.png");background-position:60px -140px;display:none;cursor:pointer;}
        　　.cont .next{width:50px;height:55px;position:absolute;top:100px; right:0px;background:url("images1/button-prev-next.png");background-position:-60px -140px;display:none;cursor:pointer;}
       　　 .motbig{width:175px;height:17px;position:absolute;bottom:10px;left:0px;right:0px;margin:0px auto;list-style-type:none;}
       　　 .motbig ul li{list-style-type:none;width:12px;height:12px;border:1px #ffffff solid;float:left;margin:1px 5px;border-radius:50%;cursor:pointer;}
       　　 .motbig ul li.hover{background:#fff;}
    　</style>

/*****************************/

/************【布局】*************/

<div class="banner">
        <div class="cont">
            <ul>
                <li style="display:block;" barbg="rgb(63,12,9)">
                    <img src="../images1/1.jpg" alt="" />
                </li>
                <li barbg="rgb(4, 28, 98)">
                    <img src="../images1/2.jpg" alt="" />
                </li>
                <li barbg="rgb(134, 162, 210)">
                    <img src="../images1/3.png" alt="" />
                </li>
                <li barbg="rgb(215, 222, 228)">
                    <img src="../images1/4.jpg" alt="" />
                </li>
                <li barbg="rgb(140, 150, 212)">
                    <img src="../images1/5.jpg" alt="" />
                </li>
                <li barbg="rgb(12, 18, 34)">
                    <img src="../images1/6.jpg" alt="" />
                </li>
                <li barbg="rgb(56, 162, 210)">
                    <img src="../images1/7.jpg" alt="" />
                </li>
            </ul>
            <div class="prev"></div>
            <div class="next"></div>
        </div>
        <div class="motbig">
            <ul>
                <li class="hover"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

/*******************************************/

<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

/************【js】*******************/

<script type="text/javascript">
        var _index = 0;
        var time;
         //点击小圆点按钮切换图片
        $(".motbig ul li").click(function () {
            $(this).addClass("hover").siblings().removeClass("hover");
            _index = $(this).index(); //获取当前序号
            play(_index);
        })
       
        //向左切换
        $(".cont .prev").click(function () {
            _index--;
            if (_index < 0) { _index = 6; }
            play(_index);
            $(".motbig ul li").eq(_index).addClass("hover").siblings().removeClass("hover");
        })

//向右切换
        $(".cont .next").click(function () {
            autoPaly();
        })

function autoPaly() {
            _index++;
            if (_index > 6) { _index = 0; }
            play(_index);
            $(".motbig ul li").eq(_index).addClass("hover").siblings().removeClass("hover");
        }

function play(_index) {
            var bg = $(".cont ul li").eq(_index).attr("barbg");
            $(".banner").css({ background: bg });
            $(".cont ul li").eq(_index).fadeIn().siblings().fadeOut();
        }

//移动到banner区域显示左右切换按钮，移开banner区域隐藏左右切换按钮
        $(".cont").hover(function () {
            $(".cont .prev").show();
            $(".cont .next").show();
            clearInterval(time);
        }, function () {
            $(".cont .prev").hide();
            $(".cont .next").hide();
            time = setInterval("autoPaly()", 3000);
        });

time=setInterval("autoPaly()", 3000);
    </script>

/*****************************/

效果：