【分享】jQuery无插件实现 鼠标拖动图片切换 功能

时间:2023-03-09 07:26:22
【分享】jQuery无插件实现 鼠标拖动图片切换 功能

前言

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

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

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


效果图

【分享】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);
};
});
});