js implements a way to switch images using mouse drag and drop

This article shows how js USES drag and drop to switch between images. Share to everybody for everybody reference. Specific implementation methods are as follows:

<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
.m-slider{width:600px;margin:0 auto 10px !important;}
#slider{width:100%; overflow:hidden;}
.m-slider .cnt{position:relative;left:0;width:2000%;}
.m-slider .cnt li{float:left;width:5%; height: 450px;
overflow: hidden;
}
.m-slider .cnt img{
display:block;width:100%;height:450px;
vertical-align:top;
}
.m-slider .cnt p{margin:10px 0;}
.m-slider .icons{text-align:center;color:#000;
position: relative; z-index: 999; margin-top: -20px;
}
.m-slider .icons span{
background: #fff; border-radius: 5px;
box-shadow: 0 0 2px #b0b0b0 inset; display: inline-block;
height: 10px; margin: 0 5px; overflow: hidden;
text-indent: -99em; width: 10px;
}
.m-slider .icons .curr{
background:#f80; box-shadow: 0 0 2px #f60 inset
}
</style>
<div class="m-slider">
<div id="slider">
<ul id="m-slider" class="cnt">
<li><a href="#1"><img src="images/mofe.jpg" alt="" /></a></li>
<li><a href="#2"><img src="images/9hll.jpg" alt="" /></a></li>
<li><a href="#3"><img src="images/p2bb.jpg" alt="" /></a></li>
<li><a href="#4"><img src="images/3srp.jpg" alt="" /></a></li>
<li><a href="#1"><img src="images/ft9s.jpg" alt="" /></a></li>
</ul>
</div>
<div id="icons" class="icons"><span class="curr">1</span>
<span>2</span> <span>3</span> <span>4</span> <span>5</span>
</div>
</div>
<script type="text/javascript">
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(){
 // Prevents the default click event for a rotavast element 
  return false;
 });
 $slider.mousedown(function(e){
 // Left mouse button wheel play area 
  if(e.target.tagName == 'IMG' && e.button == 0){
 // Left picture 
   staut = true;
  // Initialize drag , The status of true, Click events can be triggered 
   sumx = 0;
   // Initialize the mouse offset as 0
   bool = true;
   // Record left key status 
   ox = e.pageX;
   // Record the mouse's initial coordinates 
   scroll = $slider.parent().scrollLeft();
   // Record the initial wheel play horizontal scroll offset 
   e.preventDefault();
   // Prevents mouse clicks on default events 
  }
 });
 $slider.mousemove(function(e){
 // The mouse moves over the wheel cast area 
  if(bool){// Left key state 
   staut = false;
   // Has been dragging , The status of false, Click events are no longer triggered 
   mx = e.pageX;
   // Record mouse coordinates in real time 
   sumx = ox - mx;
   // Record mouse coordinates offset 
   $slider.parent().scrollLeft(scroll+sumx);
  }
 });
 $slider.mouseout(function(e){
 // Mouse away from the wheel play area 
  if(bool){
 // Left key state 
   staut = true;
   // Has been dragging , But it's off the wheel ,
   // The status of true, Click events can be triggered 
   bool = false;// Release left key status 
   sumx > 0 && i < SIZE && i++;// Under the 1 a 
   sumx < 0 && i > 0 && i--;// on 1 a 
   $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');
   });// Complete the drag 
  }
 });
 $slider.mouseup(function(e){
 // Release the mouse , complete click The event 
  bool = false;
  // Release left key status 
  if(staut && e.button == 0){
  // No drag or drag failure , And is left , Trigger click event 
   window.location.href = $(e.target).parent().attr('href');
   // Trigger click event 
  }else if(!staut && e.button == 0){
  // Successful drag-and-drop , And is left 
   sumx > 0 && i < SIZE && i++;// Under the 1 a 
   sumx < 0 && i > 0 && i--;// on 1 a 
   $slider.parent().stop().animate({scrollLeft:i*WIDTH},300,function(){
    if(i == SIZE){
    // The last 1 a 
     i = 0;
     $slider.parent().scrollLeft(0);// place 
    }
    $icons.find('.curr').removeClass('curr').end().children().eq(i).addClass('curr');
   });// Complete the drag 
  }
 });
 function setSlider(){
   i < SIZE && i++;// Under the 1 a 
   $slider.parent().stop().animate({scrollLeft:i*WIDTH},300,function(){
    if(i == SIZE){// The last 1 a 
     i = 0;
     $slider.parent().scrollLeft(0);
    }
    $icons.find('.curr').removeClass('curr').end().children().eq(i).addClass('curr');
   });// Complete the drag 
 }
 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);// place 
  //console.log(WIDTH + '-' + i);
 });
});
</script>

Hopefully, this article has been helpful in your javascript programming.