图片轮换与拖动效果

           图片自动轮换与拖动效果

              1、去年做的一个图片拖动与轮换的东东，网页中的图片拖动的时候会打开一个新的窗口显示图片，

                      所以我在上面加了一层DIV拖动的时候直接拖动DIV，里层的图片跟着走动。

               2、 图片轮换效果，fadeTo函数的淡入淡出效果，设置上层图片(a)透明度到0.5的时候，

                       底层图片(b)开始淡入，当b完全显示之后a再完全淡出

               3、鼠标移到下面导航时显示相对应的图片，同样图片轮换时，导航也会随着轮换

       

/**图片轮换开始**/
     
      var i = 0;
     
      var images = $(".recommend_imgs_click");
       
     function img_rotate(){
       if(i==4){
       $(images[4]).fadeTo(1500,0.5,function(){
          
          
           $(".recommend_imgs_click2").css("color","#BDBCBC");
           $($(".recommend_imgs_click2")[0]).css("color","#2F7C2F");
          // alert( $($(".recommend_imgs_click2")[0]).css("color"));
           $(images[0]).fadeTo(2000,1,function(){
           $(images[4]).fadeTo(1,0);
            i=0;
         });
       });
        
       }else{
      
           $(images[i]).fadeTo(2000,0.5,function(){
          
                  $(".recommend_imgs_click2").css("color","#BDBCBC");
                  $($(".recommend_imgs_click2")[i+1]).css("color","#2F7C2F");
              
              $(images[i+1]).fadeTo(2000,1,function(){
                  $(images[i]).fadeTo(1,0);
                   i++;
              });
         });
       
        }

     
    }
   
     imgs_rotate = window.setInterval(img_rotate, 7000);
   
   /************/
  
  
   //加载页面时显示第一张图
      $(".recommend_imgs_click").css("display","none");
      $($(".recommend_imgs_click2")[0]).css("color","#2F7C2F");
      $($(".recommend_imgs_click")[0]).show("slow");
    
    
    
   //鼠标覆盖下面A标签时图片显示  
      $(".recommend_imgs_click2").hover(function(){
          $(".recommend_imgs_click2").css("color","#BDBCBC");
          $(this).css("color","#2F7C2F");
       
           clearInterval(imgs_rotate);
          // $($(".recommend_imgs_click")[i]).fadeTo(1,0);
           $($(".recommend_imgs_click")[i]).css("display","none");
          // $($(".recommend_imgs_click")[parseInt(this.id)]).css("display","block");
           $($(".recommend_imgs_click")[parseInt(this.id)]).fadeTo(1,1);
          
           i =parseInt(this.id);
      },function(){
           imgs_rotate = setInterval(img_rotate, 7000);
         
      });
     
     
      //下面是鼠标点击图片 然后拖动鼠标实现滑动
     
      //鼠标放在图片上图片静止 移开循环继续
      $(".move_click").hover(function(){
               clearInterval(imgs_rotate);
              
      },function(){
               imgs_rotate = setInterval(img_rotate, 7000);
      });
     
      //滑动翻页效果
      //全局变量用于记录鼠标的横坐标
     var x1 = 0;           //记录鼠标按下时候坐标
     var x2 = 0;           //记录鼠标离开时候坐标
     var relative_pos = 0;  //用于记录按下时候 鼠标相对移动元素左边框的距离
     var flag = 0;    //用于记录当前鼠标的按下状态 1为已按下 0为未按下
    
     var id_prev = 0;  //用于滑动时候 当前图片的上一个图片
     var id_next = 0;  //用于滑动时候  当前图片的下一个图片
     var id_current = 0;            //用于滑动时候当前图片
       $(".move_click").mousedown(function(e){
          
         clearInterval(imgs_rotate);
        
          x1 = e.pageX;
         
          id_current = parseInt($(this).parent().attr("id"));
         
          var left_pos = $("#recommend_imgs").css("left");//父节点的父节点 不动元素
         
          var left_pos2 = $("#"+id_current).css("left");//当前点击的父节点 移动元素
        
          relative_pos = parseInt(x1)-parseInt(left_pos)-parseInt(left_pos2);
         
          flag = 1;
         
          if(id_current==14){
               id_prev = 13;
               id_next = 10;
          }else if(id_current==10){
               id_prev = 14;
               id_next = 11;
          }else{
           id_prev = id_current-1;
           id_next = id_current+1;
           }
         $("#"+id_prev).css({"left":"-100%","display":"block"});
         $("#"+id_prev).fadeTo(1,1);
         $("#"+id_next).css({"left":"100%","display":"block"});
         $("#"+id_next).fadeTo(1,1);
       });
     
      $(".move_click").mousemove(function(e){
         
              if(flag ==1){
            
              var x = parseInt(e.pageX);
              left_pos = x - relative_pos;
              var left_pos_pre = left_pos-1040;
              var left_pos_next = left_pos+1040;
          
             $("#"+id_current).css("left",left_pos);
             $("#"+id_prev).css("left",left_pos_pre);
             $("#"+id_next).css("left",left_pos_next);
              }else{
                 return ;
              }
       
      });
     
      $(".move_click").mouseup(function(e2){
           flag = 0;
         
           x2 = e2.pageX;
           var rel = parseInt(x2)-parseInt(x1);
         
            if(rel>200){
                i = id_prev-10;
              $("#"+id_current).animate({left: '+100%'}, "fast",function(){
                  $(".recommend_imgs_click").css({"left":"0px","display":"none"});
                  $($(".recommend_imgs_click")[i]).css("display","block");
              });
              $("#"+id_prev).animate({left: '+0px'}, "fast");
             
              $(".recommend_imgs_click2").css("color","#BDBCBC"); //下面索引
              $("#"+(id_prev-10)).css("color","#2F7C2F");
              
              
           }else if(rel<-200){
                i = id_next-10;
             
              $("#"+id_current).animate({left: '-100%'}, "fast",function(){
                  $(".recommend_imgs_click").css({"left":"0px","display":"none"});
                  $($(".recommend_imgs_click")[i]).css("display","block");
              });
              $("#"+id_next).animate({left: '+0px'}, "fast");
             
              $(".recommend_imgs_click2").css("color","#BDBCBC");//下面索引
              $("#"+(id_next-10)).css("color","#2F7C2F");
             
           }else{
              i = id_current-10;
             $("#"+id_current).animate({left: '-0px'}, "fast",function(){
                 $(".recommend_imgs_click").css({"left":"0px","display":"none"});
                 $($(".recommend_imgs_click")[i]).css("display","block");
              });
             $("#"+id_next).animate({left: '+100%'}, "fast");
             $("#"+id_prev).animate({left: '-100%'}, "fast");
            
           }
          
         
          id_prev = 0;
          id_next = 0;
         
          //imgs_rotate = setInterval(img_rotate, 7000);
        
      });
 
      /** 图片轮换结束**/

  <!-- 下面部分是网页中代码 图片等所有都是静态的 不是读取的数据-->

  <div class="recommend" id="recommend">
 
  <div class="recommend_imgs" id="recommend_imgs">
 
  <div id="10" class="recommend_imgs_click" >
  <img class="rec_img"  alt="" src="images/recommend_imgs/recommend0.jpg">
  <div id="a" class="move_click"  onselectstart="return false"></div>
  </div>
  <div id="11" class="recommend_imgs_click">
  <img class="rec_img"  alt="" src="images/recommend_imgs/recomend_2.jpeg">
  <div id="b" class="move_click" onselectstart="return false"></div>
  </div>
  <div id="12" class="recommend_imgs_click">
  <img class="rec_img"  alt="" src="images/recommend_imgs/recomend_3.jpeg">
  <div id="c" class="move_click" onselectstart="return false"></div>
  </div>
  <div id="13" class="recommend_imgs_click">
  <img class="rec_img"  alt="" src="images/recommend_imgs/recomend_4.jpeg">
  <div id="d" class="move_click" onselectstart="return false"></div>
  </div>
  <div id="14" class="recommend_imgs_click">
  <img class="rec_img"  alt="" src="images/recommend_imgs/recomend_5.jpeg">
  <div id="e" class="move_click" onselectstart="return false"></div>
  </div>
  
   </div>
 
   <div class="recommend_img_click">
  <a href="javascript:void(0)" class="recommend_imgs_click2" id="0">网易杂志</a>
  <a href="javascript:void(0)" class="recommend_imgs_click2" id="1">9块9包邮购</a>
  <a href="javascript:void(0)" class="recommend_imgs_click2" id="2">GO桌面</a>
  <a href="javascript:void(0)" class="recommend_imgs_click2" id="3">墨迹相机</a>
  <a href="javascript:void(0)" class="recommend_imgs_click2" id="4">重返热血</a>
  </div>
 
  </div>

CSS样式
.recommend{
     position: relative;
    /* left: 135px;*/
    top: 95px;
    width: 1080px;
    height: 250px;
    background-color: white;
    border: 1px solid #E2E3E1;
    margin:0 auto;
   
}
.recommend .recommend_imgs{
    position:absolute;
    left:20px;
    top:5%;
    width: 1040px;
    height: 80%;
    background-color: silver;
     overflow: hidden;
}
 .recommend .recommend_imgs .recommend_imgs_click{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.move_click{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index:5;
  background-color: red;
  opacity:0;
}
.recommend_imgs_click img{
    position:absolute;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
}
.recommend .recommend_img_click{
    position: absolute;
    right: 5px;
    bottom: 5px;
}
.recommend .recommend_imgs_click2{
    color: #BDBCBC;
    text-decoration: none;
}

以上就是拖动效果图