﻿$(document).ready(function () {
                playpic(0);
                clickplaypic();
            });

            var auto;
            var index;
            var picshow;
            var picbtn;
            var total;
            var speed = 3000; //速度
            var picshowid = "#picshow"; //图片容器ID名
            var picbtnid = "#picbtn"; //点按钮容器ID名
            function playpic(num) {
                picshow = $(picshowid).children();
                picbtn = $(picbtnid).children();
                total = $(picshow).length;
                $(picshow).eq(num).each(function () {
                    $(this).fadeIn("slow");
                    $(this).addClass("current");
                });

                $(picshow).not($(picshow).eq(num)).each(function () {
                    $(this).fadeOut("fast");
                    $(this).removeClass("current");
                });

                $(picbtn).eq(num).each(function () {
                    $(this).addClass("selected");
                });

                $(picbtn).not($(picbtn).eq(num)).each(function () {
                    $(this).removeClass("selected");
                });
                index = num >= total - 1 ? 0 : ++num;
                auto = setTimeout('playpic(index)', speed);
            }

            function clickplaypic() {
                picshow = $(picshowid).children();
                picbtn = $(picbtnid).children();
                total = $(picshow).length;
                $(picbtn).each(function (i) {
                    $(this).bind("click", function () {
                        clearTimeout(auto);
                        playpic(i);
                    });
                });
            }
