圖片切換

css:

<style type="text/css">
        ul, li
        {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .picshow
        {
            width: 300px;
            height: 300px;
            position: relative;
        }
        .num
        {
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
        .num li
        {
            float: left;
            background: #CCC;
            margin: 0 2px;
            padding: 0 3px;
            cursor: pointer;
        }
        .num li.on
        {
            background: #F00;
        }
        .piclist{ position:relative;}
        .piclist img{ position:absolute;}
    </style>

js:

<script type="text/javascript">
    var t = n = count = 0;
    $(function () {
        var piclist = $(".piclist img");
        var numlink = $(".num li");
        count = piclist.length;//3
        $(".piclist img:not(:first-child)").hide();
        $(numlink).filter(":first-child").addClass("on");
        $(numlink).each(function (i) {
            $(this).click(function () {
                $(piclist).filter(":visible").fadeOut(500);
                $(piclist).eq(i).fadeIn(1000);
                $(this).addClass("on").siblings().removeClass("on");
            });
        });
    });
    function showAuto() {
        n = n >= (count - 1) ? 0 : n + 1;
        $(".num li").eq(n).trigger("click");
    }
    function showBack() {
        n = n < (count - 1) ? 1: 0;
        $(".num li").eq(n).trigger("click");
    }
   
    //count>=3
    function showBack3() {
        n = n < (count - 2) ? 2: n-1;
        $(".num li").eq(n).trigger("click");
    }
</script>

html:

     <div class="picshow">
         <div class="piclist">
             <img src="images/image1.jpg" width="300" height="300" alt="" />
             <img src="images/image2.jpg" width="300" height="300" alt="" />
         </div>
         <ul class="num">
             <li>1</li><li>2</li></ul>
     </div>
     <div id="pause" onclick="showBack()">後退</div>
     <div id="play" onclick="showAuto()">前進</div>