美娱国际注册:js实现使用鼠标拖拽切换图片的方

标签:活动介绍    日期:2018-06-22 08:40    录入:美娱国际平台注册    浏览:

  

[js,鼠标拖拽,切换图片]js实现使用鼠标拖拽切换图片的方法

  

本文实例讲述了js实现使用鼠标拖拽切换图片的方法。分享给大家供大家参考。具体实现方法如下:  

  
  
    
  
  
      
  •   
  •   
  •   
  •   
  •   
  
  
1  2 3 4 5  
  
  jQuery(document).ready(function($){  var $slider = $('#m-slider');  var $icons = $('#icons');  var $li = $slider.children('li');  var WIDTH = $li.width();  var SIZE = $li.size();  $slider.append($li.first().clone());  //console.log(WIDTH + '-' + SIZE);  var ox,mx,ux,sumx,scroll,i=0,bool=false,staut=true;  $li.find('a').click(function(){  //阻止轮播元素的默认点击事件  return false;  });  $slider.mousedown(function(e){  //鼠标左键轮播区域  if(e.target.tagName == 'IMG' && e.button == 0){  //左键图片  staut = true;  //初始化拖拽,状态为true,可以触发点击事件  sumx = 0;  //初始化鼠标偏移为0  bool = true;  //记录左键状态  ox = e.pageX;  //记录鼠标初始坐标  scroll = $slider.parent().scrollLeft();  //记录初始轮播水平滚动偏移  e.preventDefault();  //阻止鼠标点击默认事件  }  });  $slider.mousemove(function(e){  //鼠标在轮播区域移动  if(bool){//左键状态  staut = false;  //已经拖拽,状态为false,不再触发点击事件  mx = e.pageX;  //记录鼠标实时坐标  sumx = ox - mx;  //记录鼠标坐标偏移  $slider.parent().scrollLeft(scroll+sumx);  }  });  $slider.mouseout(function(e){  //鼠标离开轮播区域  if(bool){  //左键状态  staut = true;  //已经拖拽,但是离开了轮播区域,  //状态为true,可以触发点击事件  bool = false;//释放左键状态  sumx > 0 && i < SIZE && i++;//下一个  sumx < 0 && i > 0 && i--;//上一个  $slider.parent().stop().animate({scrollLeft:i*WIDTH},300,function(){  if(i == SIZE){  i = 0;  $slider.parent().scrollLeft(0);  }  $icons.find('.curr').removeClass('curr').end().children().eq(i).addClass('curr');  });//完成拖拽  }  });  $slider.mouseup(function(e){  //鼠标释放,完成click事件  bool = false;  //释放左键状态  if(staut && e.button == 0){  //没有拖拽或者拖拽失效,且是左键,触发点击事件  window.location.href = $(e.target).parent().attr('href');  //触发点击事件  }else if(!staut && e.button == 0){  //成功拖拽,且是左键  sumx > 0 && i < SIZE && i++;//下一个  sumx < 0 && i > 0 && i--;//上一个  $slider.parent().stop().animate({scrollLeft:i*WIDTH},300,function(){  if(i == SIZE){  //最后一个  i = 0;  $slider.parent().scrollLeft(0);//归位  }  $icons.find('.curr').removeClass('curr').end().children().eq(i).addClass('curr');  });//完成拖拽  }  });  function setSlider(){  i < SIZE && i++;//下一个  $slider.parent().stop().animate({scrollLeft:i*WIDTH},300,function(){  if(i == SIZE){//最后一个  i = 0;  $slider.parent().scrollLeft(0);  }  $icons.find('.curr').removeClass('curr').end().children().eq(i).addClass('curr');  });//完成拖拽  }  var timer = setInterval(function(){  setSlider();  },3000);  $slider.hover(function(){  if(timer){  clearInterval(timer);  timer = null;  }  },function(){  timer = setInterval(function(){  setSlider();  },3000);  });  $(window).resize(function(){  WIDTH = $li.width();  $slider.parent().scrollLeft(i*WIDTH);//归位  //console.log(WIDTH + '-' + i);  });  });  
  
  

希望本文所述对大家的javascript程序设计有所帮助。

  

★★★小编:美娱国际 整理文章,欢迎大家转载 ★★★
相关文章阅读