Question

我无法找到幻灯片放映的最佳解决方案，左右箭头以圆形方式围绕单个图像进行“平移”。

我可以很容易地向右平移，然后很容易地向左移动，但是我能想到的任何解决方案来制作循环幻灯片看起来都太复杂了。

以下是幻灯片目前如何运作的解释：

有一个div包含一个长于的图像（天际线）视口宽度。溢出被隐藏了。图像大约是1和半倍长，所以两者都看到了一些天际线 “幻灯片”，这创造了我想要保持的连续性。
当用户首次加载页面时，单击左箭头即可什么都没有，但我希望它带来“自己”从中看到的左侧。
当用户首次加载页面时，单击右箭头平移对，揭示了天际线的其余部分。
此时，此时点击向左箭头向左平移，回到开头。
点击右箭头什么也没做，但是我希望它能够回归从右边开始的图像开始。

我缺少的是客户希望左箭头在第一张幻灯片上回绕到右侧。如果你按两次右箭头，它会回绕到第一侧。这种循环是我遇到麻烦的。

Answer 1

您可以通过以下方式实现上述描述：

使用android:buttonTint="@color/CHECK_COLOR" (OR) android:button="@drawable/your_check_drawable"声明css（确保将其设置为background-image）;然后
使用repeat更新javascript的{{1}}坐标：

＆＃13;

background-position

＆＃13;

function pan(direction) {
var landscape = document.getElementsByClassName('landscape')[0];
var backgroundPosition = getComputedStyle(landscape).getPropertyValue("background-position");
var x = parseInt(backgroundPosition);

if (direction === 'left') {
x = x + 600;
}

if (direction === 'right') {
x = x - 600;
}

landscape.style.backgroundPosition = x + 'px 0';
}

var buttons = document.getElementsByTagName('button');
var left = buttons[0];
var right = buttons[1];

left.addEventListener('click',function(){pan('left');},false);
right.addEventListener('click',function(){pan('right');},false);

＆＃13;

N.B。在上面的示例中，横向背景为.landscape { width: 400px; height: 150px; border: 1px solid rgb(255,0,0); background: url('http://i.imgur.com/bCLGtf3.png') repeat; background-position: 0 0; overflow: hidden; transition: all 1s ease-in-out; } .buttons { width: 82px; padding: 12px 160px; background-color: rgb(255,0,0); }宽，是其<div class="landscape"> </div> <div class="buttons"> <button type="button"><</button> <button type="button">></button> </div>宽容器宽度的1.5倍。

单张长图像的幻灯片循环

1 个答案: