// javascript document

  var curindex = 0,  //褰撳墠index
            imglen = $(".imglist li").length;  //鍥剧墖鎬绘暟
          // 瀹氭椂鍣ㄨ嚜鍔ㄥ彉鎹?.5绉掓瘡娆?
    var autochange = setinterval(function(){ 
        if(curindex <  imglen-1){ 
            curindex ++; 
        }else{ 
            curindex = 0;
        }
        //璋冪敤鍙樻崲澶勭悊鍑芥暟
        changeto(curindex);  
    },3500);

     //宸︾澶存粦鍏ユ粦鍑轰簨浠跺鐞?
    $("#prev").hover(function(){ 
        //婊戝叆娓呴櫎瀹氭椂鍣?
        clearinterval(autochange);
    },function(){ 
        //婊戝嚭鍒欓噸缃畾鏃跺櫒
        autochangeagain();
    });
    //宸︾澶寸偣鍑诲鐞?
    $("#prev").click(function(){ 
        //鏍规嵁curindex杩涜涓婁竴涓浘鐗囧鐞?
        curindex = (curindex > 0) ? (--curindex) : (imglen - 1);
        changeto(curindex);
    });
    
    //鍙崇澶存粦鍏ユ粦鍑轰簨浠跺鐞?
   $("#next").hover(function(){ 
        //婊戝叆娓呴櫎瀹氭椂鍣?
        clearinterval(autochange);
    },function(){ 
        //婊戝嚭鍒欓噸缃畾鏃跺櫒
        autochangeagain();
    });
    //鍙崇澶寸偣鍑诲鐞?
    $("#next").click(function(){ 
        curindex = (curindex < imglen - 1) ? (++curindex) : 0;
        changeto(curindex);
    });

    //瀵瑰彸涓嬭鎸夐挳index杩涜浜嬩欢缁戝畾澶勭悊绛?
    $(".indexlist").find("li").each(function(item){ 
        $(this).hover(function(){ 
            clearinterval(autochange);
            changeto(item);
            curindex = item;
        },function(){ 
            autochangeagain();
        });
    });

    //娓呴櫎瀹氭椂鍣ㄦ椂鍊欑殑閲嶇疆瀹氭椂鍣?-灏佽
    function autochangeagain(){ 
            autochange = setinterval(function(){ 
            if(curindex < imglen-1){ 
                curindex ++;
            }else{ 
                curindex = 0;
            }
        //璋冪敤鍙樻崲澶勭悊鍑芥暟
            changeto(curindex);  
        },2500);
        }

    function changeto(num){ 
        var goleft = num * 630;
        $(".imglist").animate({left: "-" + goleft + "px"},500);
        $(".infolist").find("li").removeclass("infoon").eq(num).addclass("infoon");
        $(".indexlist").find("li").removeclass("indexon").eq(num).addclass("indexon");
    }