幻灯片仅在第一次移动时移动，我的意思是，即使您更改幻灯片然后再将其改回，它也不会再次移动，这似乎是onmousemove仅在第一次尝试后才起作用，然后踩碎，您知道是什么问题了？预先感谢。
我通过编写标记了代码的这些部分（无效）。
如果单击＃second-section并移动鼠标（右，左），幻灯片也将移动（右，左），当您将鼠标进一步移动到幻灯片时，这是我的问题出现的那一刻，请再次单击在＃second-section div上并移动（向右，向左）的幻灯片根本不会移动（但是，您仍然可以更改幻灯片）。将“比率”变量更改为3时，您可以更准确地看到它。
html
<div id="second-section">
<div class="project-slide"></div>
<div class="project-slide"></div>
<div class="project-slide"></div>
<div class="project-slide"></div>
<div class="project-slide"></div>
<div class="project-slide"></div>
<div class="project-slide"></div>
<div onclick="changeSliderLeft()" id="section_arrow-left" class="section_arrow-left">
←
</div>
<div onclick="changeSliderRight()" id="section_arrow-right" class="section_arrow-right">
→
</div>
</div>
css
<style>
*
{
box-sizing: border-box;
margin: 0;
padding: 0;
}
#second-section
{
width: 100vw;
height: 100vh;
background-color: darkslategrey;
display: flex;
align-items: center;
position: relative;
perspective: 1000px;
overflow: hidden;
}
#second-section .project-slide
{
height: 50%;
width: 48%;
position: absolute;
}
#second-section .project-slide:nth-of-type(1)
{
background-color: red;
left: -24%;
transform: rotateY(30deg)
}
#second-section .project-slide:nth-of-type(2)
{
background-color: blue;
left: 26%;
transform: rotateY(0deg)
}
#second-section .project-slide:nth-of-type(3)
{
background-color: deepskyblue;
left: 76%;
transform: rotateY(-30deg)
}
#second-section .project-slide:nth-of-type(4)
{
background-color: yellow;
left: 126%;
}
#second-section .project-slide:nth-of-type(5)
{
background-color: green;
left: 176%;
}
#second-section .project-slide:nth-of-type(6)
{
background-color: white;
left: 226%;
}
#second-section .project-slide:nth-of-type(7)
{
background-color: black;
left: 276%;
}
#second-section .section_arrow-left
{
position: absolute;
bottom: 10%;
left: 40%;
font-size: 3rem;
color: rgba(255,255,255,0.9);
cursor: pointer;
}
#second-section .section_arrow-right
{
position: absolute;
bottom: 10%;
right: 40%;
font-size: 3rem;
color: rgba(255,255,255,0.9);
cursor: pointer;
}
js / jquery
//middle element
var slidePosition=1;
var slide = document.getElementsByClassName("project-slide");
var countSlide = document.querySelectorAll("#second-section .project-slide").length;
var distanceBetweenSlides = getLeftEdgePosition(1)-getLeftEdgePosition(0);
var slidePositionTab = Array(countSlide);
for(i=0; i<countSlide; i++)
{
slidePositionTab[i]=getLeftEdgePosition(i);
}
var animationTime = 850;
function changeSliderLeft()
{
//works as long as middle slide is not first one
if(slidePosition!=0)
{
slidePosition--;
//new elements positions
for(i=0; i<countSlide; i++)
{
//starting left edge position - distance between left edges
slide[i].style.left=slidePositionTab[i]+distanceBetweenSlides+"%";
slide[i].style.transition=animationTime+"ms ease-in-out";
slidePositionTab[i]+=distanceBetweenSlides;
}
//rotation
if(slidePosition==0)
{
rotate(slidePosition,0);
rotate(slidePosition+1,-30);
}
else
{
if(slidePosition-1<countSlide)
rotate(slidePosition-1,30);
if(slidePosition<countSlide)
rotate(slidePosition,0);
if(slidePosition+1<countSlide)
rotate(slidePosition+1,-30);
}
}
}
function changeSliderRight()
{
//works as long as middle slide is not last one
if(slidePosition<countSlide-1)
{
if (slidePosition!=countSlide)
slidePosition++;
///new elements positions
for(i=0; i<countSlide; i++)
{
//starting left edge position - distance between left edges
slide[i].style.left=slidePositionTab[i]-distanceBetweenSlides+"%";
slide[i].style.transition=animationTime+"ms ease-in-out";
slidePositionTab[i]-=distanceBetweenSlides;
}
//rotation
if(slidePosition-1<countSlide)
rotate(slidePosition-1,30);
if(slidePosition<countSlide)
rotate(slidePosition,0);
if(slidePosition+1<countSlide)
rotate(slidePosition+1,-30);
}
}
//////////////////////////////////////////
// D R A G //
/////////////////////////////////////////
// D R A G //
/////////////////////////////////////////
// D R A G //
/////////////////////////////////////////
//slide changes after 1/ratio of its width
var slideWidth = $(".project-slide:eq("+slidePosition+")").width();
var ratio = 7;
var currentMousePositionInsideSection;
var mousePositionInsideSection;
$("#second-section").on('mousedown', function(e)
{
//u can only by clicking on middle slideslides)
//offset left position of all slides (doesn't work)
var mousePositionInsideSlidesTab = Array(countSlide)
for(i=0; i<countSlide; i++)
{
mousePositionInsideSlidesTab[i]= e.pageX - $(".project-slide:eq("+i+")").offset().left;
}
//mouse starting x cord in section
mousePositionInsideSection = e.pageX - $("#second-section").offset().left;
//start moving
$("#second-section").on('mousemove', function(e)
{
//mouse current x cord in section
currentMousePositionInsideSection = e.pageX - $("#second-section").offset().left;
//move slides (doesn't work)
for(i=0; i<countSlide; i++)
{
newPosition(i,currentMousePositionInsideSection-mousePositionInsideSlidesTab[i]);
}
//check if diffrence between starting and current position is higher than slide width/ratio
if(mousePositionDifference().positionDifference>(slideWidth/ratio))
{
//stop moving
$("#second-section").off("mousemove");
//restrict starting position mouse higher than curret to 1
//check mouse move direction
if(mousePositionDifference().direction == "left")
{
changeSliderLeft();
}
else if(mousePositionDifference().direction == "right")
{
changeSliderRight();
}
}
})
}).on("mouseup", function()
{
$("#second-section").off("mousemove");
//back to starting slides position if diffrence between starting and current position is smaller than slide width/ratio (doesn't work)
if(mousePositionDifference().positionDifference<=(slideWidth/ratio))
{
for(i=0; i<countSlide; i++)
slide[i].style.left=slidePositionTab[i]+"%";
}
});
function getLeftEdgePosition(n)
{
//left edge position of slider number (a)
var left = slide[n].offsetLeft;
var windowWidth = window.innerWidth;
var startingPosition = Math.round(100 * left / windowWidth);
return startingPosition;
}
//rotate n element rot degres
function rotate(n,rot)
{
slide[n].style.transform="rotateY("+rot+"deg)";
}
//diffrence between starting mouse position and current mouse position relatively to middle slide and mouse move direction
function mousePositionDifference()
{
var direction;
var positionDifference=0;
if(mousePositionInsideSection>currentMousePositionInsideSection)
{
positionDifference=mousePositionInsideSection-currentMousePositionInsideSection;
direction = "right";
return {positionDifference,direction};
}
else if (mousePositionInsideSection<currentMousePositionInsideSection)
{
positionDifference = currentMousePositionInsideSection-mousePositionInsideSection;
direction = "left";
return {positionDifference,direction};
}
else
return 0;
}
//move n element('name') to position x
function newPosition(n,x)
{
$(".project-slide:eq("+n+")").offset(
{
left: x,
});
}