【方法】jQuery無插件實現 鼠標拖動切換圖片/內容 功能

 

前言

我就想隨便叨逼叨幾句，愛看就看幾句，不愛看就直接跳過看正文就好啦~

這個方法是仿寫頁面時我本身研究出來，可能有比我更簡單的方法。

但我無論，由於我沒查我不知道，我就以爲個人最好啦，耶耶耶~

 

---

  

效果圖

 

 

---

  

功能描述

一、鼠標按住移動必定距離，內容隨之進行切換。

二、開始和結尾處不能再拖動了。

三、下方的控制條隨之變換，進行切換指示。

 

---

  

解決思路

一、利用jQuery監聽鼠標移動距離

二、內容浮動排成一列，長度是父容器寬度的3倍

三、當移動距離超過必定長度時，內容移動一倍父容器寬度的距離

四、內容移動經過定位左右移動來實現

五、下方控制條3個小白點是固定的，一個大白點包含一個黑點的總體（即選中點）隨內容進行同步移動，來實現視覺上切換指示

 

---

 

代碼演示

一、HTML部分

 1 <div class="ppt">
 2     <div id="ppt-contents">
 3         <div class="ppt-item">
 4             <div class="item">
 5                 <div class="container-icon">
 6                     <i class="fa fa-quote-right"></i>
 7                 </div>
 8                 <p>跟覓未合做很愉快，咱們以爲覓未是一家很專業的品牌設計公司，這個團隊很是棒，有激情、有創造力、有執行力，常常給咱們帶來不少好的IDEA，是咱們合做過的供應商中設計水平比較高，很是值得信任的一家。</p>
 9                 <h4 class="quote-author">東阿市場部 / 劉經理 </h4>
10             </div>
11         </div>
12         <div class="ppt-item">
13             <div class="item">
14                 <div class="container-icon">
15                     <i class="fa fa-quote-right"></i>
16                 </div>
17                 <p>覓未是一家很用心的品牌設計公司，相比以前合做過的一些供應商，覓未的工做態度認真主動，項目進度控制嚴格，即使咱們沒有要求，他們也會主動作多款不一樣方向的設計稿供咱們選擇，與覓未合做咱們很放心。</p>
18                 <h4 class="quote-author">雀巢市場部 / 張經理 </h4>
19             </div>
20         </div>
21         <div class="ppt-item">
22             <div class="item">
23                 <div class="container-icon">
24                     <i class="fa fa-quote-right"></i>
25                 </div>
26                 <p>咱們是經過一次比稿選擇了覓未創意，他們除了設計能力突出以外，還有本身的技術研發團隊，經營模式融合了互聯網的服務理念，溝通流程扁平化，服務態度誠懇，執行效率高，是一家性價比很高的設計公司。</p>
27                 <h4 class="quote-author">伊利市場部 / 王經理 </h4>
28             </div>
29         </div>
30     </div>
31 </div>
32 <div class="ppt-controls">
33     <div class="dots">
34         <div class="dot"></div>
35         <div class="dot"></div>
36         <div class="dot"></div>
37         <div id="select-dot">
38             <div id="black-dot"></div>
39         </div>
40     </div>

 

二、CSS部分

 1 //最外面的父容器，至關於一個顯示口
 2 .ppt {
 3     width: 100%;
 4     height: 100%;
 5     //要隱藏超出的部分
 6     overflow: hidden;
 7     cursor: pointer;
 8     position: relative;
 9 }
10 
11 .ppt-item {
12     //子元素左浮動，使其排成一列
13     float: left;
14     color: #FFFFFF;
15     width: 33.3%;
16     //使文本沒法選中
17     user-select: none;
18 }
19 
20 #contact .container-icon {
21     margin-top: 10px;
22     font-size: 38px;
23 }
24 
25 #contact .dark-bg p {
26     margin: 25px 100px;
27     font-size: 16px;
28     line-height: 1.8;
29 }
30 
31 #contact .ppt-controls {
32     margin-top: 10px;
33 }
34 
35 .ppt-controls .dots {
36     //相對定位，使選中的點能夠相對他進行移動
37     position: relative;
38     width: 72px;
39     margin: 0 auto;
40     text-align: center;
41 }
42 
43 .ppt-controls .dot {
44     width: 8px;
45     height: 8px;
46     background-color: #FFFFFF;
47     border-radius: 5px;
48     float: left;
49     margin: 2px 8px;
50 }
51 
52 #select-dot{
53     width: 14px;
54     height: 14px;
55     background-color: #FFFFFF;
56     border-radius: 6px;
57     margin-left:8px ;
58     //相對定位，使其能夠左右移動
59     position: relative;
60     left:0;
61     //快速轉化，效果更好
62     transition: all 0.001s ease;
63 }
64 
65 #black-dot{
66     width: 8px;
67     height: 8px;
68     border-radius: 4px;
69     background-color: #4C424E;
70     margin: 0 3px;
71     position: absolute;
72     top: 3px;
73 }
74             

 

三、jQuery部分

 1 var x = 0
 2 $(".ppt").mousedown(function(event) {
 3     //獲取鼠標按下時的x方向位置
 4     x = event.pageX;
 5     $(".ppt").mouseup(function(event) {
 6         //獲取鼠標擡起時的x方向位置
 7         var newx = event.pageX;
 8          //二者相減獲得鼠標移動距離
 9         var changex = newx - x
10          //獲取內容相對於父容器的左偏移距離 
11         var left = $("#ppt-contents").position().left;
12           //獲取選中點的左偏移距離 
13         var dleft = $("#select-dot").position().left;
14          //獲取父容器的寬度
15         var width = $(".ppt").width();
16                 //判斷移動正負和大小，來決定對象移動方向的距離
17                 if(changex > 60) {
18             var newleft = left + width;
19             var newdleft = dleft - 24;
20             if(newleft > 0) {
21                 newleft = 0;
22                 newdleft = 0;
23             };
24             $("#ppt-contents").css("left", newleft);
25             $("#select-dot").css("left", newdleft);
26         };
27         if(changex < -60) {
28             var newleft = left - width
29             var newdleft = dleft + 24;
30             if(newleft < -width * 2) {
31                 newleft = -width * 2;
32                 newdleft = 48;
33             };
34             $("#ppt-contents").css("left", newleft);
35             $("#select-dot").css("left", newdleft);
36         };
37     });
38 });        
39