這篇文章主要介紹了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程序設計有所幫助。