Question

我正在制作幻灯片，除了动画外，它还可以。用于滑出的动画工作正常，但从左侧滑入的动画不能。左边距设置为0％，但没有动画，即使它最初设置为-100％。

使用Javascript：

var images = [
    'http://i.imgur.com/ByyUANz.png',
    'http://i.imgur.com/S5FfOOB.png',
    'http://i.imgur.com/EuefPdv.png',
    'http://i.imgur.com/Ucvm4pJ.png',
    'http://i.imgur.com/pK5WBHN.png',
    'http://i.imgur.com/nuOLVpy.png'
]
	
function slideShow(startAt){
    var holder = document.getElementById("currentImage");
    var img = document.createElement("img");
    img.src = images[startAt];
    holder.appendChild(img);
    nextPicture(startAt, img);
}
		
function nextPicture(current, currentElement){
	
    var holder = document.getElementById("currentImage");
    setTimeout(function(){
        currentElement.className = "translateLeft";
        current += 1;
        var img = document.createElement("img");
        img.src = images[current];
        img.style.marginLeft = "-100%";
		
        holder.appendChild(img);
        img.className = "translateIn";
				
        if (current == 5){
            current = -1;
            nextPicture(current, img);
        } else {
            nextPicture(current, img);
        }
				
    }, 5000)
			
}
		
slideShow(0);

CSS：

.translateLeft {		  
    transition: 3s;
    margin-left: 100% !important;
}
			
.translateIn {
			
    transition: 3s;
    margin-left: 0% !important;			
}

Answer 1

要创建精彩的幻灯片，我建议使用css transform属性而不是margin。我们的想法是创建具有currentImage位置的占位符元素relative，然后在其中创建位置设置为absolute的所有图像。然后默认情况下，所有图像都会从占位符元素中转换出来，添加/删除类show和hide可以将它们放在视图中，然后放在它之外，如下所示：

＆＃13;

var images = [
  'http://i.imgur.com/ByyUANz.png',
  'http://i.imgur.com/S5FfOOB.png',
  'http://i.imgur.com/EuefPdv.png',
  'http://i.imgur.com/Ucvm4pJ.png',
  'http://i.imgur.com/pK5WBHN.png',
  'http://i.imgur.com/nuOLVpy.png'
];

// Get the holder
var holder = document.getElementById("currentImage");

// Create the images
images.forEach(function(url) {
  var img = document.createElement("img");
  img.src = url;
  holder.appendChild(img);
});

// Image counter
var counter = 0;

// Slide show interval
var slideshow = setInterval(function() {
  // When we reach the end of images we shut down the slide show
  // or you can reset the counter to start over
  if(counter === images.length) {
    clearInterval(slideshow);
    return;
  }
  
  // Get all images
  var nodes = holder.getElementsByTagName("img");
  
  // Hide previous image
  if(nodes[counter - 1]) {
  	nodes[counter - 1].className = "hide";
  }
  // Show next image
  nodes[counter].className = "show";
  
  counter++;
}, 2500);

＆＃13;

#currentImage {
  background: gray;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

#currentImage img {
  width: 100%;
  position: absolute;
  transform: translateX(-110%);
  -webkit-transition: -webkit-transform 1.0s ease 0s;
  -moz-transition: -moz-transform 1.0s ease 0s;
  -o-transition: -o-transform 1.0s ease 0s;
  transition: transform 1.0s ease 0s;
}

#currentImage img.show {
  transform: translateX(0%);
}

#currentImage img.hide {
  transform: translateX(110%);
}

＆＃13;

<div id="currentImage">
</div>

＆＃13;

Answer 2

这是一个适合您的解决方案。 https://jsfiddle.net/smaefwrp/2/

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        html,
        body,
        img {
            position: absolute;
            top:0;
            left: 0;
            margin: 0;
            padding: 0;
            height: 100%;
            overflow-x: hidden;
        }

        #currentImage {
            height: 100%;
            width: 1920px;
        }
        .translateOrigin {
            transition: none;
            transform: translate3d(-100%, 0, 0) !important;
        }

        .translateLeft {
            transition: transform 3s;
            transform: translate3d(100%, 0, 0) !important;
        }

        .translateIn {
            transition: transform 3s;
            transform: translate3d(0, 0, 0) !important;
        }
    </style>
</head>
<body>
<div id="currentImage">
</div>
<div id="buttons">
</div>
<script type="text/javascript">
    var images = [
        'http://i.imgur.com/ByyUANz.png',
        'http://i.imgur.com/S5FfOOB.png',
        'http://i.imgur.com/EuefPdv.png',
        'http://i.imgur.com/Ucvm4pJ.png',
        'http://i.imgur.com/pK5WBHN.png',
        'http://i.imgur.com/nuOLVpy.png'
    ];
    var imageEle = [];
    var currImage = 0;
    var holder = document.getElementById("currentImage");

    function imagesPreload() {
        for (var i = 0; i < images.length; i++) {
            var img = new Image();
            img.src = images[i];
            img.className = "translateOrigin";
            holder.appendChild(img);
            imageEle.push(img);
        }
    }

    imagesPreload();

    document.onkeydown = function(event){
        if(event.keyCode === 13) {
            nextPicture();
        }
    };

    function slideShow(startAt) {
        var holder = document.getElementById("currentImage");
        imageEle[currImage].className = "translateIn";
        nextPicture();
    }

    function nextPicture() {
        setTimeout(function () {
            var img = imageEle[currImage];
            img.addEventListener("transitionend", transitionEnd, false);
            img.className = "translateLeft";

            if (currImage == 5) {
                currImage = 0;
            } else {
                currImage++;
            }
            imageEle[currImage].className = "translateIn";

            /* Reset the image to original position */
            function transitionEnd() {
                img.className = "translateOrigin";
                img.removeEventListener("transitionend", transitionEnd, false);
                nextPicture();
            }
        }, 5000)
    }
    slideShow(currImage);

</script>
</body>
</html>

Answer 3

您可以尝试以下内容：

// HTML
<div id="currentImage">
  <div class="window">
    <div class="image-list">
      <div>
        <img src="http://i.imgur.com/ByyUANz.png" />
      </div>
      <div>
        <img src="http://i.imgur.com/S5FfOOB.png" />
      </div>

      <div>
        <img src="http://i.imgur.com/EuefPdv.png" />
      </div>

      <div>
        <img src="http://i.imgur.com/Ucvm4pJ.png" />
      </div>

      <div>
         <img src="http://i.imgur.com/pK5WBHN.png" />
       </div>

      <div>
        <img src="http://i.imgur.com/nuOLVpy.png" />
      </div>

    </div>
  </div>
</div>

和CSS

// CSS
img {
  height: 50px;
  width: 50px
}

.window {
  position: absolute;
  height: 50px;
  width: 50px;
  border: 2px solid red;
  overflow: hidden
}
div {
  display: inline-block

}
.image-list {
  list-style-type: none;
  display: inline-block;
  padding-left: 0px;
  margin: 0px;
  width: 350px;
  animation: slidingli 30s ; 
}

@keyframes slidingli {
  0% {
    transform: translateX(0px)
  }

  16% {
    transform: translateX(-50px)
  }

  32% {
    transform: translateX(-100px)
  }

  48% {
    transform: translateX(-150px)
  }

  64% {
    transform: translateX(-200px)
  }

  80% {
    transform: translateX(-250px)
  }

  100% {
    transform: translateX(-300px)
  }
}

结帐this小提琴。此外，还有许多库提供了所需的功能，例如：http://fotorama.io/customize/autoplay/

从左侧动画

3 个答案: