초점 그림

  
  
  
  

   
   
   
   
<script> 
   
   
   
   
$(function(){ 
   
   
   
   
    var index = 0; 
   
   
   
   
    var show_len = $(".show > li").length; 
   
   
   
   
    $(".list > li").mouseover(function(){ 
   
   
   
   
        index = $(".list > li").index(this); 
   
   
   
   
        //$(".list > li").eq(index).addClass("Light").siblings().removeClass("Light"); 
   
   
   
   
        //$(".show > li").eq(index).show().siblings().hide(); 
   
   
   
   
        show_img(index); 
   
   
   
   
        }) 
   
   
   
   
        $(".show").hover( 
   
   
   
   
            function(){ 
   
   
   
   
                clearInterval(autoplay); 
   
   
   
   
                },function(){ 
   
   
   
   
                    autoplay = setInterval(function(){ 
   
   
   
   
                        show_img(index); 
   
   
   
   
                        index++; 
   
   
   
   
                        if (index==show_len){index=0;} 
   
   
   
   
                        },3000) 
   
   
   
   
                    } 
   
   
   
   
            ).mouseout(); 
   
   
   
   
             
   
   
   
   
    }) 
   
   
   
   
    function show_img(index){ 
   
   
   
   
        var show_height = $(".show > li").height(); 
   
   
   
   
        $(".show").stop(true,false).animate({top:-show_height*index},1000); 
   
   
   
   
        $(".list > li").removeClass("Light").eq(index).addClass("Light"); 
   
   
   
   
        } 
   
   
   
   
 
   
   
   
   
</script> 
  
  
  
  

  
  
  
  

   
   
   
   
<div id="box"> 
   
   
   
   
    <ul class="show"> 
   
   
   
   
        <li><img src="img/1.jpg" /></li> 
   
   
   
   
        <li><img src="img/2.jpg" /></li> 
   
   
   
   
        <li><img src="img/3.jpg" /></li> 
   
   
   
   
        <li><img src="img/4.jpg" /></li> 
   
   
   
   
        <li><img src="img/5.jpg" /></li> 
   
   
   
   
    </ul> 
   
   
   
   
    <ul class="list"> 
   
   
   
   
        <li class="Light">1</li> 
   
   
   
   
        <li>2</li> 
   
   
   
   
        <li>3</li> 
   
   
   
   
        <li>4</li> 
   
   
   
   
        <li>5</li> 
   
   
   
   
    </ul> 
   
   
   
   
</div> 
  
  
  
  

  
  
  
  

   
   
   
   
<style> 
   
   
   
   
* { margin:0; padding:0; border:none; list-style:none;} 
   
   
   
   
#box { width:500px; height:300px; overflow:hidden; position:relative; margin:30px auto; border:1px solid #000;} 
   
   
   
   
.show { width:500px; height:auto; position:absolute; top:0; left:0;} 
   
   
   
   
.show li img { width:500px; height:300px;} 
   
   
   
   
.list { width:auto; height:20px; position:absolute; right:0px; bottom:5px;} 
   
   
   
   
.list li { width:20px; height:20px; background:#FC6; text-align:center; line-height:20px; float:left; margin-right:5px; cursor:pointer} 
   
   
   
   
.list .Light {background:#000; color:#FFF} 
   
   
   
   
</style>