﻿
       
      $(document).ready(function(){
      
         var myImages = new Array();  //创建图像数组
        myImages[0] = "/Template/成都七中/img/2.jpg";
        myImages[1] = "/Template/成都七中/img/3.jpg";
        myImages[2] = "/Template/成都七中/img/4.jpg";
        myImages[3] = "/Template/成都七中/img/1.jpg";
        
     var imageIndex=0;  //定义初始显示的图像索引
    
     
     setInterval(function (){autoChangeImage()},3000);  //自动更换图片
     var autoChangeImage=function(){   
         var $imageControl=$("#imageControlone");
         $imageControl.attr({"src":myImages[imageIndex]});
         imageIndex++;
         if(imageIndex==myImages.length-1){
         imageIndex=0;
         }
     }
     
     var manualChangeImage=function(imgTag){    //手动更换图片
         var $imageIndex=$(imgTag).val();
         var $imageControl=$("#imageControlone");
         $imageControl.attr({"src":myImages[$imageIndex]});
     }
      
      /** 获取必要的位置/大小等元素**/
         var imageControlWidth=$("#imageControlone").width();
         var imageControlHeight=$("#imageControlone").height();
         
         var $imageControl = $("#imageControlone");
         var position = $imageControl.position();
         
         var imageControlLeft=position.left;
         var imageControltop=position.top;
         
        
         var buttonsLeft=imageControlLeft+imageControlWidth-90;
         var buttonsTop=imageControltop+imageControlHeight-25;
         var thisBtnLeft=buttonsLeft;
         for(var i=0;i<myImages.length;i++){  //动态加载图片张数个按钮
             var $thisButton=$("<input type='button' style='color:white' value="+i+"  />");
             $thisButton.attr({"id":"btn"+i});
             $thisButton.bind({"click":function(){manualChangeImage(this)}});
             $thisButton.css({"position":"absolute","left":thisBtnLeft,"top":buttonsTop,"background-color":"#070603","width":"20px","border":"0px","cursor":"pointer"});
             $thisButton.bind({"mouseover":function(){$(this).css({"background-color":"red"})}});
             $thisButton.bind({"mouseout":function(){$(this).css({"background-color":"#070603"})}});
             $thisButton.appendTo($(document.body));
             thisBtnLeft=thisBtnLeft+23;
         }
      });

