我正在尝试使用 javascript 创建一个可滚动的图片库,所以我能够创建它,但现在我希望它像无限循环一样工作,即一旦它到达最后一张图片,然后在下一次点击时它应该开始又是第一张图
这是我的html代码
var width = 130; // image width
var count = 4; // visible images count
var list = carousel.querySelector('ul');
var listElems = carousel.querySelectorAll('li');
var position = 0;
// shift left
document.querySelector('.prev').onclick = function() {
position += width * count;
position = Math.min(position, 0);
list.style.marginLeft = position + 'px';
};
// shift right
document.querySelector('.next').onclick = function() {
position -= width * count;
position = Math.max(position, -width * (listElems.length - count));
list.style.marginLeft = position + 'px';
};
.carousel {
position: relative;
width: 508px;
padding: 10px 40px;
border: 1px solid #CCC;
border-radius: 15px;
background: #eee;
}
.carousel img {
width: 130px;
height: 130px;
}
.arrow {
position: absolute;
top: 40%;
padding: 0;
background: #ddd;
border-radius: 15px;
border: 1px solid gray;
font-size: 24px;
line-height: 24px;
color: #444;
}
.arrow:focus {
outline: none;
}
.arrow:hover {
background: #ccc;
cursor: pointer;
}
.prev {
left: 7px;
}
.next {
right: 7px;
}
.gallery {
width: 530px;
overflow: hidden;
}
.gallery ul {
height: 130px;
width: 10000px;
margin: 0;
padding: 0;
list-style: none;
transition: margin-left 350ms;
font-size: 0;
}
.gallery li {
display: inline-block;
}
<div class="carousel" id="carousel">
<button class="arrow prev">⇦</button>
<div class="gallery">
<ul class="images">
<li><img src="https://en.js.cx/carousel/1.png"></li>
<li><img src="https://en.js.cx/carousel/2.png"></li>
<li><img src="https://en.js.cx/carousel/3.png"></li>
<li><img src="https://en.js.cx/carousel/4.png"></li>
<li><img src="https://en.js.cx/carousel/5.png"></li>
<li><img src="https://en.js.cx/carousel/6.png"></li>
<li><img src="https://en.js.cx/carousel/7.png"></li>
<li><img src="https://en.js.cx/carousel/8.png"></li>
<li><img src="https://en.js.cx/carousel/9.png"></li>
<li><img src="https://en.js.cx/carousel/10.png"></li>
<li><img src="https://en.js.cx/carousel/5.png"></li>
<li><img src="https://en.js.cx/carousel/1.png"></li>
<li><img src="https://en.js.cx/carousel/8.png"></li>
</ul>
</div>
<button class="arrow next">⇨</button>
</div>
它工作正常,就像点击按钮时图像正在滚动,但我希望它可以无限循环滚动
最佳答案
在将 position
的变量分配给 style.marginLeft
之前,您可以通过检查来做到这一点:
- 对于
next
按钮,position
变量等于-((旋转木马元素的数量 - 四个(应显示 4 张卡片))乘以元素的宽度)
通常-((listElems.length - 4) * width)
然后将0
分配给position
因此轮播重新开始。 - 对于
prev
按钮,position
变量等于0
然后赋值给它-((轮播的编号元素 - 四(应显示 4 张卡片))乘以元素的宽度)
。
这是一个演示:
var width = 130; // image width
var count = 4; // visible images count
var list = carousel.querySelector('ul');
var listElems = carousel.querySelectorAll('li');
var position = 0;
// shift left
document.querySelector('.prev').onclick = function() {
position += width * count;
position = Math.min(position, 0);
/** check if we have to loop back from the end **/
position === 0 && (position = -((listElems.length - 4) * width));
list.style.marginLeft = position + 'px';
};
// shift right
document.querySelector('.next').onclick = function() {
position -= width * count;
position = Math.max(position, -width * (listElems.length - count));
/** check if we have to loop back from the begining **/
position === -((listElems.length - 4) * width) && (position = 0);
list.style.marginLeft = position + 'px';
};
.carousel {
position: relative;
width: 508px;
padding: 10px 40px;
border: 1px solid #CCC;
border-radius: 15px;
background: #eee;
}
.carousel img {
width: 130px;
height: 130px;
}
.arrow {
position: absolute;
top: 40%;
padding: 0;
background: #ddd;
border-radius: 15px;
border: 1px solid gray;
font-size: 24px;
line-height: 24px;
color: #444;
}
.arrow:focus {
outline: none;
}
.arrow:hover {
background: #ccc;
cursor: pointer;
}
.prev {
left: 7px;
}
.next {
right: 7px;
}
.gallery {
width: 530px;
overflow: hidden;
}
.gallery ul {
height: 130px;
width: 10000px;
margin: 0;
padding: 0;
list-style: none;
transition: margin-left 350ms;
font-size: 0;
}
.gallery li {
display: inline-block;
}
<div class="carousel" id="carousel">
<button class="arrow prev">⇦</button>
<div class="gallery">
<ul class="images">
<li><img src="https://en.js.cx/carousel/1.png"></li>
<li><img src="https://en.js.cx/carousel/2.png"></li>
<li><img src="https://en.js.cx/carousel/3.png"></li>
<li><img src="https://en.js.cx/carousel/4.png"></li>
<li><img src="https://en.js.cx/carousel/5.png"></li>
<li><img src="https://en.js.cx/carousel/6.png"></li>
<li><img src="https://en.js.cx/carousel/7.png"></li>
<li><img src="https://en.js.cx/carousel/8.png"></li>
<li><img src="https://en.js.cx/carousel/9.png"></li>
<li><img src="https://en.js.cx/carousel/10.png"></li>
<li><img src="https://en.js.cx/carousel/5.png"></li>
<li><img src="https://en.js.cx/carousel/1.png"></li>
<li><img src="https://en.js.cx/carousel/8.png"></li>
</ul>
</div>
<button class="arrow next">⇨</button>
</div>
关于javascript - 可滚动的图片库循环在最后一张图片之后工作,它应该再次从第一张图片开始,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57593354/