JS implementation using the mouse to drag and drop the image of the method _javascript skills

This article describes the JS implementation using the mouse to drag and drop the image of the method. Share to everyone for your reference. The implementation method is 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 img{. CNT display:block;width:100%;he
ight:450px;
Vertical-align:top; M-slider. CNT p{margin:10px 0; M-slider icons{text-align:center;color: #000; position:relative; z-index:999; margi
N-top: -20px; M-slider. Icons span{background: #fff border-radius:5px; box-shadow:0 0 2px #b0b0b0 inset; display:inline-block; h eight: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" > &L T;div id= "Slider" > <ul id= "m-slider" class= "cnt" > <li><a href= "#1" ></a></li> <li><a href=" #2 "></a ></li> <li><a href= "#3" ></a></li> <li ><a href= "#4" ></a></li> <li><a "href=" #1 "> </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. A (). Clone ());
 Console.log (WIDTH + '-' + SIZE);
 var ox,mx,ux,sumx,scroll,i=0,bool=false,staut=true; $li. Find (' A '). Click (function () {//Prevent the default click event of a carousel element return false;
 }); $slider. MouseDown (function (e) {//left mouse button Carousel Area if (e.target.tagname = = ' IMG ' && e.button = 0) {//left arrow picture Staut = TR
  Ue
   Initialization drag, the state is true, you can trigger the Click event SUMX = 0;
   Initialize mouse offset to 0 bool = true;
   Record left state ox = E.pagex;
   Record mouse initial coordinates scroll = $slider. Parent (). ScrollLeft ();
   Record initial carousel horizontal scrolling offset e.preventdefault ();
 Stop mouse click Default Event}});
   $slider. MouseMove (function (e) {//mouse moves in the Carousel area if (bool) {//left state Staut = false;
   Has been dragged, the state is false, no longer triggers the Click event mx = E.pagex;
   Record mouse real-time coordinates sumx = OX-MX;
  Record the mouse coordinate offset $slider. Parent () scrollleft (SCROLL+SUMX);
 }
 });
   $slider. Mouseout (function (e) {//mouse out of the carousel area if (bool) {//left state Staut = true; has been dragged, but left the carousel area,//status is true, can trigger click event bool = false;//release left state sumx > 0 && i < SIZE && i++;//Next A Sumx < 0 && i > 0 && i--;//last $slider. Parent (). Stop (). Animate ({Scrollleft:i*width},300,func tion () {if (i = = SIZE) {i = 0;
    $slider. Parent (). scrollleft (0);
   $icons. Find ('. Curr '). Removeclass (' Curr '). End (). Children (). EQ (i) addclass (' Curr ');
 );//Complete Drag}});
  $slider. MouseUp (function (e) {//mouse release, complete Click event bool = FALSE; Release left state if (staut && e.button = 0) {//No drag or drag failure, and is left button, triggering click event window.location.href = $ (e.target). Parent (). A
   TTR (' href '); Trigger Click event}else if (!staut && e.button = 0) {//successfully dragged and left button sumx > 0 && i < SIZE && i++;/ /Next Sumx < 0 && i > 0 && i--;//last $slider. Parent (). Stop (). Animate ({scrollleft:i*width},300,f
     Unction () {if (i = = SIZE) {//last i = 0; $slider. Parent (). scrollleft (0);//Return $icons. Find ('. Curr '). Removeclass (' Curr '). (). Children (). EQ (i) addclass ('
   Curr ');
 );//Complete Drag}}); function Setslider () {i < SIZE && i++;//the next $slider. Parent (). Stop (). Animate ({Scrollleft:i*width},300,func
     tion () {if (i = = SIZE) {//last i = 0; $slider. Parent (). scrollleft (0);
   $icons. Find ('. Curr '). Removeclass (' Curr '). End (). Children (). EQ (i) addclass (' Curr ');
 //Complete 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);//Homing//console.log (WIDTH + '-' + i);
});
}); </script>

The

wants this article to help you with your JavaScript programming.