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.