前言
我就想随便叨逼叨几句，爱看就看几句，不爱看就直接跳过看正文就好啦~
这个方法是仿写页面时我自己研究出来，可能有比我更简单的方法。
但我不管，因为我没查我不知道，我就觉得我的最好啦，耶耶耶~
效果图
功能描述
1、鼠标按住移动一定距离，内容随之进行切换。
2、开始和结尾处不能再拖动了。
3、下方的控制条随之变换，进行切换指示。
解决思路
1、利用jQuery监听鼠标移动距离
2、内容浮动排成一列，长度是父容器宽度的3倍
3、当移动距离超过一定长度时，内容移动一倍父容器宽度的距离
4、内容移动通过定位左右移动来实现
5、下方控制条3个小白点是固定的，一个大白点包含一个黑点的整体（即选中点）随内容进行同步移动，来实现视觉上切换指示
代码演示
1、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>
2、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 ????????????3、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 - x10 ?????????//获取内容相对于父容器的左偏移距离 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 - width29 ????????????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 ????【分享】jQuery无插件实现 鼠标拖动切换图片/内容 功能
原文地址：http://www.cnblogs.com/roashley/p/7856134.html