【方法】jQuery无插件实现 鼠标拖动切换图片/内容 功能

 

前言

我就想随便叨逼叨几句，爱看就看几句，不爱看就直接跳过看正文就好啦~

这个方法是仿写页面时我自己研究出来，可能有比我更简单的方法。

但我不管，因为我没查我不知道，我就觉得我的最好啦，耶耶耶~

 

---

  

效果图

 

 

---

  

功能描述

1、鼠标按住移动一定距离，内容随之进行切换。

2、开始和结尾处不能再拖动了。

3、下方的控制条随之变换，进行切换指示。

 

---

  

解决思路

1、利用jQuery监听鼠标移动距离

2、内容浮动排成一列，长度是父容器宽度的3倍

3、当移动距离超过一定长度时，内容移动一倍父容器宽度的距离

4、内容移动通过定位左右移动来实现

5、下方控制条3个小白点是固定的，一个大白点包含一个黑点的整体（即选中点）随内容进行同步移动，来实现视觉上切换指示

 

---

 

代码演示

1、HTML部分

<div class="ppt">
    <div id="ppt-contents">
        <div class="ppt-item">
            <div class="item">
                <div class="container-icon">
                    <i class="fa fa-quote-right"></i>
                </div>
                <p>跟觅未合作很愉快，我们觉得觅未是一家很专业的品牌设计公司，这个团队非常棒，有激情、有创造力、有执行力，经常给我们带来很多好的IDEA，是我们合作过的供应商中设计水平比较高，非常值得信任的一家。</p>
                <h4 class="quote-author">东阿市场部 / 刘经理 </h4>
            </div>
        </div>
        <div class="ppt-item">
            <div class="item">
                <div class="container-icon">
                    <i class="fa fa-quote-right"></i>
                </div>
                <p>觅未是一家很用心的品牌设计公司，相比之前合作过的一些供应商，觅未的工作态度认真主动，项目进度控制严格，即便我们没有要求，他们也会主动做多款不同方向的设计稿供我们选择，与觅未合作我们很放心。</p>
                <h4 class="quote-author">雀巢市场部 / 张经理 </h4>
            </div>
        </div>
        <div class="ppt-item">
            <div class="item">
                <div class="container-icon">
                    <i class="fa fa-quote-right"></i>
                </div>
                <p>我们是通过一次比稿选择了觅未创意，他们除了设计能力突出之外，还有自己的技术研发团队，经营模式融合了互联网的服务理念，沟通流程扁平化，服务态度诚恳，执行效率高，是一家性价比很高的设计公司。</p>
                <h4 class="quote-author">伊利市场部 / 王经理 </h4>
            </div>
        </div>
    </div>
</div>
<div class="ppt-controls">
    <div class="dots">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div id="select-dot">
            <div id="black-dot"></div>
        </div>
    </div>

 

2、CSS部分

//最外面的父容器，相当于一个显示口
.ppt {
    width: 100%;
    height: 100%;
    //要隐藏超出的部分
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.ppt-item {
    //子元素左浮动，使其排成一列
    float: left;
    color: #FFFFFF;
    width: 33.3%;
    //使文本无法选中
    user-select: none;
}

#contact .container-icon {
    margin-top: 10px;
    font-size: 38px;
}

#contact .dark-bg p {
    margin: 25px 100px;
    font-size: 16px;
    line-height: 1.8;
}

#contact .ppt-controls {
    margin-top: 10px;
}

.ppt-controls .dots {
    //相对定位，使选中的点可以相对他进行移动
    position: relative;
    width: 72px;
    margin: 0 auto;
    text-align: center;
}

.ppt-controls .dot {
    width: 8px;
    height: 8px;
    background-color: #FFFFFF;
    border-radius: 5px;
    float: left;
    margin: 2px 8px;
}

#select-dot{
    width: 14px;
    height: 14px;
    background-color: #FFFFFF;
    border-radius: 6px;
    margin-left:8px ;
    //相对定位，使其可以左右移动
    position: relative;
    left:0;
    //快速转化，效果更好
    transition: all 0.001s ease;
}

#black-dot{
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: #4C424E;
    margin: 0 3px;
    position: absolute;
    top: 3px;
}
            

 

3、jQuery部分

var x = 0
$(".ppt").mousedown(function(event) {
    //获取鼠标按下时的x方向位置
    x = event.pageX;
    $(".ppt").mouseup(function(event) {
        //获取鼠标抬起时的x方向位置
        var newx = event.pageX;
         //两者相减得到鼠标移动距离
        var changex = newx - x
         //获取内容相对于父容器的左偏移距离 
        var left = $("#ppt-contents").position().left;
          //获取选中点的左偏移距离 
        var dleft = $("#select-dot").position().left;
         //获取父容器的宽度
        var width = $(".ppt").width();
                //判断移动正负和大小，来决定对象移动方向的距离
                if(changex > 60) {
            var newleft = left + width;
            var newdleft = dleft - 24;
            if(newleft > 0) {
                newleft = 0;
                newdleft = 0;
            };
            $("#ppt-contents").css("left", newleft);
            $("#select-dot").css("left", newdleft);
        };
        if(changex < -60) {
            var newleft = left - width
            var newdleft = dleft + 24;
            if(newleft < -width * 2) {
                newleft = -width * 2;
                newdleft = 48;
            };
            $("#ppt-contents").css("left", newleft);
            $("#select-dot").css("left", newdleft);
        };
    });
});