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

这篇文章主要介绍了js实现使用鼠标拖拽切换图片的方法,涉及javascript操作图片实现轮播效果的相关技巧,非常具有实用价值,需要的朋友可以参考下

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

1. <script type="text/javascript" src="js/jquery.min.js"></script> 
2. <style type="text/css"> 
3. *{margin:0;padding:0;} 
4. .m-slider{width:600px;margin:0 auto 10px !important;} 
5. #slider{width:100%; overflow:hidden;} 
6. .m-slider .cnt{position:relative;left:0;width:2000%;} 
7. .m-slider .cnt li{float:left;width:5%; height: 450px; 
8. overflow: hidden; 
9. } 
10. .m-slider .cnt img{ 
11. display:block;width:100%;height:450px; 
12. vertical-align:top; 
13. } 
14. .m-slider .cnt p{margin:10px 0;} 
15. .m-slider .icons{text-align:center;color:#000; 
16. position: relative; z-index: 999; margin-top: -20px; 
17. } 
18. .m-slider .icons span{ 
19. background: #fff; border-radius: 5px; 
20. box-shadow: 0 0 2px #b0b0b0 inset; display: inline-block; 
21. height: 10px; margin: 0 5px; overflow: hidden; 
22. text-indent: -99em; width: 10px; 
23. } 
24. .m-slider .icons .curr{ 
25. background:#f80; box-shadow: 0 0 2px #f60 inset 
26. } 
27. </style> 
28. <div class="m-slider"> 
29. <div id="slider"> 
30. <ul id="m-slider" class="cnt"> 
31. <li><a href="#1"><img src="images/mofe.jpg" alt="" /></a></li> 
32. <li><a href="#2"><img src="images/9hll.jpg" alt="" /></a></li> 
33. <li><a href="#3"><img src="images/p2bb.jpg" alt="" /></a></li> 
34. <li><a href="#4"><img src="images/3srp.jpg" alt="" /></a></li> 
35. <li><a href="#1"><img src="images/ft9s.jpg" alt="" /></a></li> 
36. </ul> 
37. </div> 
38. <div id="icons" class="icons"><span class="curr">1</span> 
39. <span>2</span> <span>3</span> <span>4</span> <span>5</span> 
40. </div> 
41. </div> 
42. <script type="text/javascript"> 
43. jQuery(document).ready(function($){ 
44. var $slider = $('#m-slider'); 
45. var $icons = $('#icons'); 
46. var $li = $slider.children('li'); 
47. var WIDTH = $li.width(); 
48. var SIZE = $li.size(); 
49. $slider.append($li.first().clone()); 
50. //console.log(WIDTH + '-' + SIZE); 
51. var ox,mx,ux,sumx,scroll,i=0,bool=false,staut=true; 
52. $li.find('a').click(function(){ 
53. //阻止轮播元素的默认点击事件 
54. return false; 
55. }); 
56. $slider.mousedown(function(e){ 
57. //鼠标左键轮播区域 
58. if(e.target.tagName == 'IMG' && e.button == 0){ 
59. //左键图片 
60. staut = true; 
61. //初始化拖拽,状态为true,可以触发点击事件 
62. sumx = 0; 
63. //初始化鼠标偏移为0 
64. bool = true; 
65. //记录左键状态 
66. ox = e.pageX; 
67. //记录鼠标初始坐标 
68. scroll = $slider.parent().scrollLeft(); 
69. //记录初始轮播水平滚动偏移 
70. e.preventDefault(); 
71. //阻止鼠标点击默认事件 
72. } 
73. }); 
74. $slider.mousemove(function(e){ 
75. //鼠标在轮播区域移动 
76. if(bool){//左键状态 
77. staut = false; 
78. //已经拖拽,状态为false,不再触发点击事件 
79. mx = e.pageX; 
80. //记录鼠标实时坐标 
81. sumx = ox - mx; 
82. //记录鼠标坐标偏移 
83. $slider.parent().scrollLeft(scroll+sumx); 
84. } 
85. }); 
86. $slider.mouseout(function(e){ 
87. //鼠标离开轮播区域 
88. if(bool){ 
89. //左键状态 
90. staut = true; 
91. //已经拖拽,但是离开了轮播区域, 
92. //状态为true,可以触发点击事件 
93. bool = false;//释放左键状态 
94. sumx > 0 && i < SIZE && i++;//下一个 
95. sumx < 0 && i > 0 && i--;//上一个 
96. $slider.parent().stop().animate({scrollLeft:i*WIDTH},300,function(){ 
97. if(i == SIZE){ 
98. i = 0; 
99. $slider.parent().scrollLeft(0); 
100. } 
101. $icons.find('.curr').removeClass('curr').end().children().eq(i).addClass('curr'); 
102. });//完成拖拽 
103. } 
104. }); 
105. $slider.mouseup(function(e){ 
106. //鼠标释放,完成click事件 
107. bool = false; 
108. //释放左键状态 
109. if(staut && e.button == 0){ 
110. //没有拖拽或者拖拽失效,且是左键,触发点击事件 
111. window.location.href = $(e.target).parent().attr('href'); 
112. //触发点击事件 
113. }else if(!staut && e.button == 0){ 
114. //成功拖拽,且是左键 
115. sumx > 0 && i < SIZE && i++;//下一个 
116. sumx < 0 && i > 0 && i--;//上一个 
117. $slider.parent().stop().animate({scrollLeft:i*WIDTH},300,function(){ 
118. if(i == SIZE){ 
119. //最后一个 
120. i = 0; 
121. $slider.parent().scrollLeft(0);//归位 
122. } 
123. $icons.find('.curr').removeClass('curr').end().children().eq(i).addClass('curr'); 
124. });//完成拖拽 
125. } 
126. }); 
127. function setSlider(){ 
128. i < SIZE && i++;//下一个 
129. $slider.parent().stop().animate({scrollLeft:i*WIDTH},300,function(){ 
130. if(i == SIZE){//最后一个 
131. i = 0; 
132. $slider.parent().scrollLeft(0); 
133. } 
134. $icons.find('.curr').removeClass('curr').end().children().eq(i).addClass('curr'); 
135. });//完成拖拽 
136. } 
137. var timer = setInterval(function(){ 
138. setSlider(); 
139. },3000); 
140. $slider.hover(function(){ 
141. if(timer){ 
142. clearInterval(timer); 
143. timer = null; 
144. } 
145. },function(){ 
146. timer = setInterval(function(){ 
147. setSlider(); 
148. },3000); 
149. }); 
150. $(window).resize(function(){ 
151. WIDTH = $li.width(); 
152. $slider.parent().scrollLeft(i*WIDTH);//归位 
153. //console.log(WIDTH + '-' + i); 
154. }); 
155. }); 
156. </script> 

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