jquery图片网页特效 jquery 图片

     这几天刚开始学习jQuery，感觉jQuery确实很强大，下了个CHM的手册，看他的筛选器，属性还有各种方法

感觉不难，几天不碰忘记了，看来还是缺乏练习，还没有真正会用，只是理解怎么回事吧了，所以决定坚持天天练习

自己动手写，

    这个是个简单的图片切换，当然只用js也能很好的实现，但是感觉没有jQuery来的快速直接，尤其是他的选择器很方便，

不用在js里面做循环了呵呵，我做的初衷是实现缩略图单击后图片淡入淡出，但是尝试了很多次没有解决，也不知道问题出在哪里

如果有谁知道，请在评论里面给我指教一下，不胜感激。

效果图入下

代码实现部分

1 
  
$(document).ready( 
  function 
  () 
  
 
  {//这里最好不要用$()取代
 2
  $(".thumil_img img").hover(
 3
     function()
{$(this).animate(
{marginRight:"20"}),"slow"},
 4
     function()
{$(this).animate(
{marginRight:"0"}),"slow"}
 5
                        )
 6
  $(".thumil_img li a").click(function()
{
 7
    var img_path=$(this).attr("href");
 8
    var title=$(this).attr("title");
 9
    $("#largeImages").attr(
{src:img_path}) ;
10
    $("#largeImages").fadeIn("slow")
11
    $(".title").html(title);
12
    return false;//一定要有return false，否则会跳转链接到图片         
13
})
14
} 
  );
 
  15

1   
a    {
}   {
 2
  blr:expression(this.notallow=this.blur())
 3
}   /**/ 
  /*去除a标点击后的签的虚线,在FF浏览器下不起作用，只好又在a标签里面写入了*/ 
  
    4 
  
*    {
}   {
 5
    margin:0;
 6
    padding:0;
 7
}   
    8 
  
#reimg    {
}   {
 9
    margin:0 auto;
10
    width:410px;
11
    margin-top:200px;
12
}   
   13 
  
#largeImages    {
}   {
14
    height:250px;
15
    width:400px;
16
    display:block;
17
    margin-bottom:5px;
18
    padding:5px;
19
    border:1px #ccc solid;
20
}   
   21 
  
.thumil_img    {
}   {
22
    list-style:none;
23
    height:20px;
24
    margin-bottom:5px;
25
    width:200px;
26
    display:inline;
27
}   
   28 
  
.thumil_img li    {
}   {
29
    float:left;
30
    margin-right:5px;
31
}   
   32 
  
.thumil_img img    {
}   {
33
    height:20px;
34
    padding:2px;
35
    border:1px solid #ccc;
36
}   
   37 
  
.title    {
}   {
38
    float:right;
39
    margin-right:10px;
40
    display:block;
41
}   
   42 
  
.title p:first-letter    {
}   {
43
    text-transform:uppercase;
44
}

1  < div  id ="reimg" >   < img   id ="largeImages"  src ="images/1.jpg"   />
2     < ul  class ="thumil_img" >
3       < li >< a  href ="images/1.jpg"  title ="Apple"  onFocus ="this.blur()" >< img  src ="images/1.jpg"   /></ a ></ li >
4       < li >< a  href ="images/2.jpg"  title ="Cool"  onFocus ="this.blur()" >< img  src ="images/2.jpg"   /></ a ></ li >
5       < li >< a  href ="images/3.jpg"  title ="Diamond"  onFocus ="this.blur()" >< img  src ="images/3.jpg"   /></ a ></ li >
6       < li >< a  href ="images/4.jpg"  title ="Color"  onFocus ="this.blur()" >< img  src ="images/4.jpg"   /></ a ></ li >
7     </ ul >
8     < span  class ="title" > Apple </ span >  
9    </ div >