jquery简单应用篇——焦点图片切换

     最近学习了jquery，于是把一些简单的应用贴出来跟大家分享！ 源代码下载

例子一：  通过mouseover事件来切换焦点图片

<script>
 $(function(){
   $("#tabsC ul:not(:first)").hide();
   
 $("#tabsT div:not(:first)").addClass("moardd");
    $("#tabsT div:first").addClass("mod");
 
   $("#tabsT div").each(function(index){
 
       $(this).mouseover(
           function(){
    
        $("#tabsT div").removeClass("mod");
        $("#tabsT div").addClass("moardd");
    
        $("#tabsT div:eq(" + index + ")").removeClass("moardd");
    
        $("#tabsT div:eq(" + index + ")").addClass("mod");
            $("#tabsC > ul:visible").hide();
            $("#tabsC ul:eq(" + index + ")").show();
   
    })
 
 
   })
})

 
</script>

 

例子二： 通过click事件来切换焦点图片

<script>
 $(function(){
   $("#tabsC2 ul:not(:first)").hide();

 $("#tabsT2 div:not(:first)").addClass("moardd");
        $("#tabsT2 div:first").addClass("mod");

   $("#tabsT2 div").each(function(index){   
     
   
     $(this).click(
           function(){
    

 

        $("#tabsT2 div").removeClass("mod");
        $("#tabsT2 div").addClass("moardd");
    
        $("#tabsT2 div:eq(" + index + ")").removeClass

("moardd");
    
        $("#tabsT2 div:eq(" + index + ")").addClass("mod");
         $("#tabsC2 > ul:visible").hide();
               $("#tabsC2 ul:eq(" + index + ")").fadeIn("slow");
            
         
          
             })
 
   })
})

 
</script>