Вставка CSS из анимации слева

ProgramBox

Вставка CSS из анимации слева

Post author:admin
Запись опубликована:24 марта, 2023
Post category:Вопросы по программированию

#javascript #css

Вопрос:

Я работаю над слайд-шоу, и оно работает, за исключением анимации. Анимация для скольжения работает нормально, но анимация для скольжения слева — нет. Левое поле устанавливается равным 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;			
}

1. Есть ли шанс получить плунжер, скрипку или фрагмент? Это было бы намного проще исправить, если бы мы могли посмотреть на это и отладить в режиме реального времени…

2. Удалите весь javascript и используйте css @keyframes

3. Где находится DOM (HTML)

4. @anied jsfiddle.net/smaefwrp

5. Итак, проблема в том, что изображение вообще не появляется после первого слайда? Потому что это то, что происходит в скрипке…

Ответ №1:

Вот решение для вас. 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>

Ответ №2:

Для создания красивого слайд-шоу я предлагаю использовать transform свойство css, а не margin . Идея состоит в том, чтобы создать элемент-заполнитель currentImage с relative позицией, а затем создать все изображения внутри него с позицией, установленной на absolute . Затем по умолчанию все изображения переводятся из элемента-заполнителя и добавляются / удаляются классы, show и hide вы можете размещать их внутри представления, а затем за его пределами, вот так:

 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);

 #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%);
}

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

Ответ №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)
  }
}

Проверьте эту скрипку. Также существует множество библиотек, которые предоставляют то, что нужно, например:http://fotorama.io/customize/autoplay /