Js implements the method of switching images with the mouse drag and drop. js drag and drop

Js implements the method of switching images with the mouse drag and drop. js drag and drop

This example describes how to use the mouse to drag and drop images in JavaScript. Share it with you for your reference. The specific 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: pixel; overflow: hidden ;}. m-slider. cnt img {display: block; width: 100%; height: pixel PX; 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">  </a> </li> <li> <a href = "#2">  </a> </li> <a href = "#3">  </a> </li> <a href = "#4">  </a> </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 ('lil'); 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 () {// The default click event to stop carousel elements return false;}); $ slider. mousedown (function (e) {// rat Left-click carousel region if(e.tar get. tagName = 'img '& e. button = 0) {// left-click image staut = true; // initialize the drag and drop operation. The status is true and the Click Event sumx = 0 can be triggered; // initialize the mouse offset to 0 bool = true; // record the left-click state ox = e. pageX; // record the initial coordinates of the mouse scroll = $ slider. parent (). scrollLeft (); // record the initial carousel horizontal scroll offset e. preventDefault (); // prevents the mouse from clicking the default event}); $ slider. mousemove (function (e) {// move the mouse in the carousel area if (bool) {// left-click status staut = false; // It has been dragged and the status is false, click Event mx = e. pageX; // record the Real-Time mouse coordinate sumx = ox- Mx; // record the mouse coordinate offset $ slider. parent (). scrollLeft (scroll + sumx) ;}}; $ slider. mouseout (function (e) {// move the mouse out of the carousel region if (bool) {// left-click status staut = true; // the player has been dragged but left the carousel region, // The status is true. You can trigger the Click Event bool = false; // release the left-click sumx> 0 & I <SIZE & I ++; // The next sumx <0 & I> 0 & I --; // The previous $ slider. parent (). stop (). animate ({scrollLeft: I * WIDTH}, 300, function () {if (I = SIZE) {I = 0; $ slider. parent (). scrollLeft (0);} $ icons. find ('. c Urr '). removeClass ('curr '). end (). children (). eq (I ). addClass ('curr') ;}); // complete drag}); $ slider. mouseup (function (e) {// release the mouse, complete the click Event bool = false; // release the left button status if (staut & e. button = 0) {// No drag or drop is invalid, and the left button is used to trigger the click event window. location. href = parameters (e.tar get ). parent (). attr ('href '); // trigger Click Event} else if (! Staut & e. button = 0) {// drag and drop successfully, and the left button sumx> 0 & I <SIZE & I ++; // The next sumx <0 & I> 0 & I --; // The previous $ slider. parent (). stop (). animate ({scrollLeft: I * WIDTH}, 300, function () {if (I = SIZE) {// last I = 0; $ slider. parent (). scrollLeft (0); // return} $ icons. find ('. curr '). removeClass ('curr '). end (). children (). eq (I ). addClass ('curr') ;}); // complete drag}); function setSlider () {I <SIZE & I ++; // the next $ slider. parent (). stop (). animate ({scrollLeft: I * WIDTH}, 300, function () {if (I = SIZE) {// last I = 0; $ slider. parent (). scrollLeft (0);} $ icons. find ('. curr '). removeClass ('curr '). end (). children (). eq (I ). addClass ('curr') ;}); // complete dragging} 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); // reset // console. log (WIDTH + '-' + I) ;};}); </script>

I hope this article will help you design javascript programs.