<!DOCTYPE html>
<html>
<head>
 <title>启明星焦点图片切换</title>
 <base target=_blank>
<script src="../Javascript/jquery-1.9.1.min.js" type="text/javascript"></script>
  <style> 
*{ margin:0px;padding:0px}
ul,li{ list-style-type:none}
img{ border:0}
body{font-size:12px; font-family:Verdana} 
.picbox2 { z-index:100; left:0px; width:374px; position:absolute; top:0px; height:268px;}
.pic_list_box {float: left;  overflow: hidden;   } 
.pic_list_box img{ width:290px; height:230px;} 
.img-wz{ left:0px;top:0px; position:absolute; 	color:#FFFFFF;	background-color:gray;	width:280px;
	line-height:28px; height:30px;	padding-left:10px;	text-align: left; 
	margin-top:230px;filter:Alpha(opacity=80);font-size:12px;  overflow:hidden;
  } 

#thum_list { display:inline; float:right; width:80px; margin:0; margin-top:2px }
#thum_list img{ border:solid 1px #ffffff; width:70px; height:45px; margin-right:7px; margin-top:8px; float:right}
#thum_list li { width:80px; height:61px;filter:alpha(opacity=90); padding-bottom:5px;*padding-bottom:2px; cursor:pointer; }
#thum_list .current {opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }  
#thum_list ul li a {color: #fff; text-decoration: none;font-size:12px;text-align: left;}
#thum_list ul li a:hover { text-decoration:none;text-align: left;}
 
  </style> 
</head>
<body>
   
  


   
<div class=picbox2>
<div class=pic_list_box> 
   
     <div id="pic_list">
        $ltpics$
     </div>  
 
 
 
</div>


<div  id="thum_list" > 
        <ul>
        $lttext$
        </ul> 
 </div>
 
 
 </div>
 
 

  
 
   



  
<SCRIPT language=javascript>
    var CurrentHotScreen =0;
    var refreshFocus = null;
    var bigPic = $("#pic_list>div");
    bigPic.hide();
    var smallPic = $("#thum_list ul li");
    smallPic.hide();

    var PageSize=4;
    var RecordCount = $("#thum_list li").length;
    var CurrentPage=1; 
    var AllPage=0;
    
      AllPage = parseInt((RecordCount / PageSize));
      AllPage = ((RecordCount % PageSize) != 0 ? AllPage + 1 : AllPage);
      AllPage = (AllPage == 0 ? 1 : AllPage);
     

    //screen 切换索引
      function setHotQueryList(itemIndex) {
          if (itemIndex==(RecordCount))
              itemIndex = 0;
          
          bigPic.hide();
          $("#pic_list>div").eq(itemIndex).show();

          smallPic.hide();

          CurrentPage = parseInt(((itemIndex+1) / PageSize));
          CurrentPage = (((itemIndex+1) % PageSize) != 0 ? CurrentPage + 1 : CurrentPage);
          PrePage = CurrentPage - 1;

          for (var m = PrePage * PageSize; m < CurrentPage * PageSize; m++) {
              $("#thum_list ul li").eq(m).show();
          }

          if (CurrentHotScreen==(RecordCount-1)) {
              CurrentHotScreen =-1;
          }
      }

   
   
    function refreshHotQuery() {
        refreshFocus = null;
        CurrentHotScreen = CurrentHotScreen + 1;
        setHotQueryList(CurrentHotScreen);
        refreshFocus = setTimeout('refreshHotQuery();', 5000);
    }


    setHotQueryList(CurrentHotScreen);
    refreshFocus = setTimeout('refreshHotQuery();', 5000);
 


    function show_focus_image(index) {
        clearTimeout(refreshFocus);
        setHotQueryList(index);
        refreshFocus = setTimeout('refreshHotQuery();', 5000);
    }


    $(document).ready(function () {

        $("#thum_list a").each(function (index) {
            $(this).mouseover(function () {
                show_focus_image(index);
            });
        });
    });

	</SCRIPT>
	
 
     
     
    
</body>
</html>