HTML部分

 
    
         
     
          
          
          
      
           
       
        
             
          
         
                      
          
           
                        
            
             
              
             
            
            
             
              
             
            
            
             
              
             
            
            
             
              
             
            
            
             
              
             
            
             
            
                         
                         
                         
                         
                         
                         
                  
             
              <    
              
               >
               
               
              
             
            
           
          
         
        
       
      
     
    

/*页面初始化*/*{    padding: 0;    margin: 0;}ul{    list-style: none;}/*设置最外围的盒子*/.contents{    width: 730px;    height: 454px;    margin: 40px auto;    border: 5px solid black;    position:relative;}/*设置几张图片*/.img li{    position:absolute;/*设置绝对定位，使图片脱离文档流，使六张图片重叠在一起*/    top:0;    right:0;    display: none;}/*设置下面六个按钮*/.num {    position: absolute;/*设置按钮上级UL的定位为绝对定位，使它优先级高于图片，并显示在图片的上方*/    bottom: 10px;    left: 0;    font-size: 0;/*在上一级设置字体大小，使每一个块之间的间距消除，但要在下一级设置回字体的大小*/    width:100%;/*设置宽度，才可以使用文字居中方法*/    text-align:center;    cursor:pointer;}.num li{    display:inline-block;    width: 20px;    height: 20px;    background-color: #666666;    color: #fff;    text-align: center;    line-height: 20px;    border-radius:50% ;    font-size: 14px;    margin: 0 2px;}.num li.active{    background-color: #a00;}/*设置左右两个按钮*/.btn{    position: absolute;    top:50%;    width:30px;    height: 60px;    background-color: rgba(0,0,0,0.5);    color: #fff;    text-align: center;    line-height: 60px;    margin-top: -30px;/*使图片居中后向上*/    cursor:pointer;    display: none;/*是左右两个按钮在鼠标移过去的时候才会出现，先隐藏*/}.contents:hover .btn{    display: block;/*鼠标移入内容区域，左右两个按钮出现*/}.left{    left: 0;}.right{    right:0;}

 /** * Created by Administrator on 2016/1/25. */$(document).ready(function(){    //获得图片的数量    var size=$(".img li").size();    //使用for循环，添加li元素到num中    for(var x=1;x<=size;x++){        $(".num").append("
"+x+"
");//中间加入x变量的方法    }    //设置手动轮播图    $(".img li").eq(0).show();    $(".num li").eq(0).addClass("active");    $(".num li").mouseover(function(){        $(this).addClass("active");        $(this).siblings().removeClass("active");//使所有其他所有的兄弟元素移除类        var index=$(this).index();//添加索引值        i=index;//使手动轮播和自动轮播相匹配。        $(".img li").eq(index).stop().fadeIn(300).siblings().stop().fadeOut(300);//加入stop方法使第二个解决第二个BUG    }); //不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。对应mouseout//只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。对应mouseleave    //设置自动向右轮播图    var i = 0;    var t =setInterval(zidong,1000);    function zidong(){        i++;        if(i==size){i=0}        $(".num li").eq(i).addClass("active").siblings().removeClass("active");        $(".img li").eq(i).fadeIn(500).siblings().fadeOut(500);    }    //如果鼠标滑动到框中，自动轮播应该停止，如果鼠标移除框外，自动轮播继续    $(".contents").hover(function(){        clearInterval(t);    },function(){        t=setInterval(zidong,1500);    });    //设置自动向左轮播图    function zidongl(){        i--;        if(i==-1){i=size-1}        $(".num li").eq(i).addClass("active").siblings().removeClass("active");        $(".img li").eq(i).fadeIn(500).siblings().fadeOut(500);    }    //设置左右两个按钮的功能    $(".left").click(function(){        zidongl();//另外设置一个自动向左轮播图的功能    });    $(".right").click(function(){        zidong();//右边按钮的功能与上面设置的zidong功能一样    })});

完成后有几个疑问：1，多次使用相同的JQ选择器后，WebStorm会有黄色的warning提示，是否应该用更好的方法。

                               2、完成这个渐入渐出鲜果之后，想知道类似豆瓣电影模块的左右滑动是如何完成的。

最后：记录在这次学习中学习到的不熟悉的jQuery的方法：

        1.append(content) 向每个匹配的元素内部追加内容。

        2.size()  jQuery 对象中元素的个数。 返回值:Number

        3.addClass(class) 为每个匹配的元素添加指定的类名。

        4.index([subject]) 搜索匹配的元素，并返回相应元素的索引值，从0开始计数。 返回值:Number

        5.eq(index) 获取第N个元素

        6.siblings([expr]) 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。