如何用一张图片制作幻灯片

Question

我正在为一个朋友做一个网站，他让我做一个类似的网站，比如http://www.santalibrada.com.py/

我有一个 10000 像素 x 1080 像素的图像，我想只使用该图像制作幻灯片。

我想制作一个将图像向右移动1920px的按钮，我尝试这种方式

<script>
    function slide() {
     var slideImage = document.getElementById('image');
     slideImage.style.position = "absolute"
     slideImage.style.transform = "translateX(-1920px)"
    }
</script>

但它只移动一次。 我怎样才能做到这一点，当我再次按下按钮时，它又向右移动了 1920 像素？

我会添加一张图片，以便你们更好地理解，因为我的英语不是那么好。

Answer 1

只需在 html #slideshow 中添加一个 div

并在幻灯片中添加另一个 div 并为此 div 设置背景图像并使用此 js 代码

var slideshow= document.querySelector("#slideshow"); // This slidshow Father Of Img
var img= document.querySelector("#Background"); // This For Div Has Img Background

slideshow.addEventListener("mousemove", function(e) { //To add Event Mousemove
 //Change Position of img To Move it
  img.style.backgroundPositionX = -e.offsetX * 1.8 + "px"; 
  img.style.backgroundPositionY = -e.offsetY + 80 + "px";
});
//This When You Hover One SlideShow
slideshow.addEventListener("mouseenter", function() {
  setTimeout(function() {
    slideshow.removeEventListener("mouseenter");
  }, 250);
  
});

所以如果你想了解我在这段代码中使用的所有方法，这里是：

背景位置

抵消

鼠标进入

事件监听器

那只是谢谢你<3

Answer 2

尝试这个

HTML

<div id="landing-content">
    <section class="slider"> 
        <img src="http://i.imgur.com/fVWomWz.png"></img>
            
        </section>
 </div>

CSS

#landing-content {
overflow: hidden;
background-image: url(http://i.imgur.com/F2FPRMd.jpg);
width: 100%;
background-size: cover;
background-repeat: no-repeat;
max-height: 500px;
border-bottom: solid;
border-bottom-color: #628027;
border-bottom-width: 5px;
}

.slider {
margin-left: auto;
margin-right: auto;
overflow: hidden;
padding-top: 200px;
max-width: 1002px;
}

.slider img {
width: 80%;
padding-left: 10%;
padding-right: 10%;
height: auto;
margin-left: auto;
margin-right: auto;
}

Jquery

$('#landing-content').mousemove(function(e){
    var amountMovedX = (e.pageX * -1 / 6);
    var amountMovedY = (e.pageY * -1 / 6);
    $(this).css('background-position', amountMovedX + 'px ' + amountMovedY + 'px');
});