分享jquery无插件实现鼠标拖动切换图片/内容功能

 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>

 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             

 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