我想编写自己的jQuery滑块,它显示下一个和上一个图像的一小部分(例如20px
)。
为实现这一目标,我创建了一个简单的图像滑块,使用float: left;
将overflow: hidden
div内的所有图像排列在一行中。
我的所有图片都有200px
的固定宽度。因此,我使用以下sass计算每个图像的边距:
img {
float: left;
display: block;
margin: 0 calc((100vw - 200px) / 4 - 20px);
&:first-child {
margin-left: calc((100vw - 200px) / 2);
}
&:last-child {
margin-right: calc((100vw - 200px) / 2);
}
}
这很有效,可以定位每个图像。
尝试使用transform: translateX();
设置滑块动画时我完全失去了计算像素数量(以vw /%/ px为单位)我需要翻译$('#slider').
如何计算translateX
值以滑动到每个居中的图像?
$(document).ready(function(){
document.getElementById('slider').ondragstart = function() { return false; };
var slider = $('#slider'),
images = slider.find('img'),
imageCount = images.length,
currentIndex = 0;
slider.width( imageCount * 100 + "vw");
var slideLeft = function () {
if ( currentIndex >= imageCount - 1 ) {
console.log("Last image reached");
return;
}
currentIndex += 1;
console.log("Slide left");
slider.css("transform", "translateX(" + currentIndex * -10 + "vw)");
}
var slideRight = function () {
if ( currentIndex === 0 ) {
console.log("First image reached");
return;
}
currentIndex -= 1;
console.log("Slide right");
slider.css("transform", "translateX(" + currentIndex * -10 + "vw)");
}
$('#right').on('click', function(){
slideLeft();
});
$('#left').on('click', function(){
slideRight();
});
});

html, body {
margin: 0;
padding: 0;
}
#slider-container {
overflow: hidden;
height: 300px;
background: rgba(0, 0, 0, 0.05);
margin: 5vw 0;
width: 100vw;
}
#slider {
height: 300px;
transition: transform .3s ease-in-out;
transform: translateX(0);
}
#slider img {
float: left;
display: block;
margin: 0 calc((100vw - 200px) / 4 - 20px);
}
#slider img:first-child {
margin-left: calc((100vw - 200px) / 2);
}
#slider img:last-child {
margin-right: calc((100vw - 200px) / 2);
}
#controls {
position: relative;
width: 100vw;
display: block;
height: calc(10vw + 100px);
}
#controls .arrow {
display: block;
width: 100px;
top: 5vw;
background: lightgray;
height: 100px;
left: 5vw;
position: absolute;
font-size: 100px;
line-height: 80px;
font-weight: bold;
text-align: center;
cursor: pointer;
}
#controls .arrow:hover {
background: lightblue;
}
#controls #right {
left: auto;
right: 5vw;
}
p {
margin: 0 5vw 5vw;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider-container">
<div id="slider">
<img src="https://unsplash.it/200/300?image=1077" alt="img-1">
<img src="https://unsplash.it/200/300?image=1076" alt="img-2">
<img src="https://unsplash.it/200/300?image=1072" alt="img-3">
<img src="https://unsplash.it/200/300?image=1063" alt="img-4">
<img src="https://unsplash.it/200/300?image=1061" alt="img-5">
</div>
</div>
<div id="controls">
<div id="left" class="arrow">‹</div>
<div id="right" class="arrow">›</div>
</div>
<p>Currently every scroll click scrolls a random amount to the left or right. This needs to be fixed, so that every image is centered after the slide.</p>
&#13;
答案 0 :(得分:1)
我在你的剧本中做了一些更新。
尝试使用此脚本
$(document).ready(function(){
document.getElementById('slider').ondragstart = function() { return false; };
var slider = $('#slider'),
images = slider.find('img'),
imageCount = images.length,
currentIndex = 0;
slider.width( imageCount * 100 + "vw");
var $this = $("#slider-container");
var offset = $this.offset();
var width = $this.width();
var centerX = (offset.left + width / 2 ) + (images.width() / 2) - 40;
var slideLeft = function () {
if ( currentIndex >= imageCount - 1 ) {
console.log("Last image reached");
return;
}
currentIndex += 1;
console.log("Slide left");
slider.css("transform", "translateX(-" + (currentIndex * centerX) + "px)");
}
var slideRight = function () {
if ( currentIndex === 0 ) {
console.log("First image reached");
return;
}
currentIndex -= 1;
console.log("Slide right");
slider.css("transform", "translateX(-" + (currentIndex * centerX) + "px)");
}
$('#right').on('click', function(){
slideLeft();
});
$('#left').on('click', function(){
slideRight();
});
});
检查这个小提琴:jsFiddle