在最后一张幻灯片之后单击屏幕右侧的第 1 个/在第 2 个幻灯片之后的第 1 个中单击屏幕左侧
Posted
技术标签:
【中文标题】在最后一张幻灯片之后单击屏幕右侧的第 1 个/在第 2 个幻灯片之后的第 1 个中单击屏幕左侧【英文标题】：click on right of screen come 1st after last slide/click on left of screen in come 1st after 2nd slide 【发布时间】：2020-01-26 11:25:13 【问题描述】：当我点击屏幕右侧的当前幻灯片（第一张）时，从右向左滑动并显示第二张幻灯片和第三张、第四张、第五张幻灯片，但是在下次点击（第五次）时，不显示第一张幻灯片并且有黑屏。另外，当我单击屏幕左侧的当前幻灯片（第一张）时，从左向右滑动并显示第 5 张幻灯片和第 4、3、2 张幻灯片，但在下次单击（第 5 次）时，不显示第 1 张幻灯片是空白屏幕。幻灯片编号在点击屏幕左侧和右侧时效果很好。我在下面给出了html结构和jquery。任何人都可以改进它来解决这个问题。提前致谢。
HTML
<div class="home-slide">
<div class="slide-wrapper">
<div class="slide">slide 1</div>
<div class="slide">slide 2</div>
<div class="slide">slide 3</div>
<div class="slide">slide 4</div>
<div class="slide">slide 5</div>
</div>
</div>
<div class="slide-number">
<div class="active">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
CSS
.slide-wrapper
display: flex;
width: 100%;
height: 100%;
color: #fff;
.slide
position: absolute;
width: 100%;
height: 100%;
min-height: 100%;
padding: 100px 40px;
clip: rect(0 1366px 660px 0);
-webkit-transition: linear .5s;
transition: linear .5s;
cursor: pointer;
border-right: 1px solid #000;
.slide:nth-child(1)
background-color: #F2358D;
/*--magenta shade--*/
z-index: 5;
.slide:nth-child(2)
background-color: #04D9B2;
/*--cyne shade--*/
z-index: 4;
.slide:nth-child(3)
background-color: #F2C53D;
/*--yellow shade--*/
z-index: 3;
.slide:nth-child(4)
background-color: #6a8aff;
/*--blue shade--*/
z-index: 2;
.slide:nth-child(5)
background-color: #3FFF42;
/*--green shade--*/
z-index: 1;
.slide-clip-left
clip: rect(0 1365px 660px 1365px);
.slide-clip-right
clip: rect(0 0 1365px 0);
.slide-number
display: flex;
max-width: 100%;
position: absolute;
bottom: 0;
left: 45%;
transform-x: 50%;
text-align: center;
z-index: 999;
.slide-number div
padding: 20px 10px;
opacity: .5;
.slide-number div.active
opacity: 1;
jquery
var $numbers = $('.slide-number').children();
var $slides = $('.slide');
var numSlides = $slides.length;
var currentSlideL = 0;
var currentSlideR = 0;
$('.slide').click(function(e)
var pWidth = $(this).innerWidth(); //use .outerWidth() if you want borders
var pOffset = $(this).offset();
var x = e.pageX - pOffset.left;
if(pWidth/2 > x)
currentSlideL = (currentSlideL - 1) % numSlides;
var $targetL = $slides.eq(currentSlideL);
setTimeout(() =>
$(this).addClass('slide-clip-left').animate('z-index': 1 );
$numbers.eq(currentSlideL).addClass('active').siblings().removeClass('active');
, 500);
$target.removeClass('slide-clip-left').delay(200).animate('z-index': 5 );
else if(pWidth/2 < x)
currentSlideR = (currentSlideR + 1) % numSlides;
var $targetR = $slides.eq(currentSlideR);
setTimeout(() =>
$(this).addClass('slide-clip-right').animate('z-index': 1 );
$numbers.eq(currentSlideR).addClass('active').siblings().removeClass('active');
, 500);
$target.removeClass('slide-clip-right').delay(200).animate('z-index': 5 );
);
当我点击屏幕右侧时，我希望滑块能正常工作，应该显示第一张幻灯片，当点击屏幕左侧时，第二张幻灯片后会显示第一张幻灯片。
【问题讨论】：
发布你的 CSS ，并且在你的代码中 $target 没有定义 @Sim1-81，感谢您的回复。我将 $target 分别设置为 $targetL 和 $targetR 并且它可以工作。但是另一个问题是，当我在屏幕的任何一侧单击继续时，没关系，但在我单击另一侧时，幻灯片不显示并且屏幕变黑。你能帮我出什么问题吗？请在我更新时检查 css。 在解决方案下方，但对您的代码进行了一些操作，希望对您有所帮助 【参考方案1】：好的，我得到了解决方案，但我改变了方法。
这里是新代码。我还为滑块添加了一些响应能力。现在我检查左边距而不是 z-index 来为滑块容器设置动画，而不仅仅是 1 张幻灯片，所以我不必知道当前幻灯片是哪一张来找到下一张，我只关心是否边距小于 0 并且大于 .slide 宽度和 .slider-wrapper 宽度之间的差异。这样，当您单击左侧时，我会在左侧边距中减去当前的.slide 宽度，并在单击右侧时添加它。看看resize_slider() 函数。最后一件事但不是为了相关性，将.stop() 放在.animate() 之前可以防止动画重叠。
附：您可以使用相同的方法通过 CSS 变换制作动画
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body margin: 0; padding:0
.home-slide
overflow: hidden;
width: 100%;
.slide-wrapper
display: flex;
flex-direction: row;
overflow: hidden;
width: 100%;
height: 80vh;
color: #fff;
.slide
position: relative;
height: 100%;
min-height: 100%;
padding: 100px 40px;
-webkit-transition: linear .5s;
transition: linear .5s;
cursor: pointer;
border: none;
box-sizing: border-box;
font-size: 20px
.slide:nth-child(1)
background-color: #F2358D;
/*--magenta shade--*/
.slide:nth-child(2)
background-color: #04D9B2;
/*--cyne shade--*/
.slide:nth-child(3)
background-color: #F2C53D;
/*--yellow shade--*/
.slide:nth-child(4)
background-color: #6a8aff;
/*--blue shade--*/
.slide:nth-child(5)
background-color: #3FFF42;
/*--green shade--*/
.slide-number
display: flex;
max-width: 100%;
position: absolute;
bottom: 0;
left: 45%;
transform-x: 50%;
text-align: center;
z-index: 999;
.slide-number div
padding: 20px 10px;
opacity: .5;
.slide-number div.active
opacity: 1;
</style>
</head>
<body>
<div class="home-slide">
<div class="slide-wrapper">
<div class="slide">slide 1</div>
<div class="slide">slide 2</div>
<div class="slide">slide 3</div>
<div class="slide">slide 4</div>
<div class="slide">slide 5</div>
</div>
</div>
<div class="slide-number">
<div class="active">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<script>
var $numbers,$slides,numSlides,isSliding,currSlide = 1;
console.log('numSlides', numSlides)
$(document).ready(function ()
resizeSlides();
$('.slide').click(function (e)
var pWidth = $(this).outerWidth(); //use .outerWidth() if you want borders
var pOffset = $(this).offset();
var x = e.pageX - pOffset.left;
console.log($('.slide-wrapper').css('marginLeft'))
var posX = Math.floor(parseInt($('.slide-wrapper').css('marginLeft').replace('px')));
var sliderW = Math.floor($('.slide-wrapper').width())
var direction;
if (pWidth / 2 > x)
direction = 'left';
else if (pWidth / 2 < x)
direction = 'right';
console.log('(pWidth - sliderW)',(pWidth - sliderW));
console.log('posX', posX);
console.log('typeof posX', typeof posX);
console.log('pWidth', pWidth);
console.log('sliderW', sliderW);
console.log('(pWidth - sliderW)',(pWidth - sliderW));
if (!isSliding)
isSliding = true;
if (direction == 'left' && posX < 0)
$('.slide-wrapper').stop().animate('marginLeft': '+=' + pWidth + 'px', 500, function ()
currSlide--;
$('.slide-number .active').removeClass('active')
$('.slide-number div:nth-child(' + (currSlide) + ')').addClass('active');
isSliding = false;
);
else if (direction == 'right' && (pWidth - sliderW) < posX)
$('.slide-wrapper').stop().animate('marginLeft': '-=' + pWidth + 'px', 500, function ()
currSlide++;
$('.slide-number .active').removeClass('active')
$('.slide-number div:nth-child(' + (currSlide) + ')').addClass('active');
isSliding = false;
);
setTimeout(function ()
isSliding = false;
, 500)
);
)
$(window).resize(function ()
resizeSlides();
);
function resizeSlides()
$numbers = $('.slide-number').children();
$slides = $('.slide');
numSlides = $slides.length;
isSliding = false;
currSlide = 1;
var sliderW = Math.floor($('.home-slide').width());
var numSlides = $('.slide-number').children().length;
$('.slide').each(function ()
$(this).outerWidth(sliderW);
);
$('.slide-wrapper').width(sliderW * numSlides);
</script>
</body>
</html>【讨论】：
非常感谢您的编码和努力。这是很好的方法。但我正在尝试使用 css 剪辑效果来制作不同的滑块动画，并且不想改变方式。很抱歉。 好的，如果你不想改变方法，我可以给你一点提示，你的代码很有效，但我认为，你应该只为 currentSlide 使用一个变量，你不'不需要currSlideL和currSLideR，只需要currSlide，并检查它是否总是大于0并且小于slides.length在每张幻灯片改变之前根据左键单击或右键单击增加或减少以上是关于在最后一张幻灯片之后单击屏幕右侧的第 1 个/在第 2 个幻灯片之后的第 1 个中单击屏幕左侧的主要内容，如果未能解决你的问题，请参考以下文章