SnvMohan Ответов: 1

Горизонтально перемещаться в автоматическом режиме изображения в див


У меня есть изображение размером 15152 * 404. Я просто хочу показать этот img В div. Но это изображение должно изменяться горизонтально (когда оно изменяется автоматически, этот img-человек делает какое-то действие, например gif) с помощью css или jquery. Я попробовал следующий html, Img показан правильно, но нужно двигаться горизонтально. Пожалуйста, помогите мне в этом.

ДЛЯ IMG : Джаспер.ПНГ[^]

Что я уже пробовал:

HTML :

<!DOCTYPE html>


div.picture1 {
   background-image:url('jasper.png');  
   transform-origin: 0px 0px 0px; 
   z-index: 82; 
   transform: translate(250px, 0);
   width: 200px; 
   height: 404px;    
   margin: 0 auto;    
   padding: 0;
}
&lt;/style

<body>

<div class="picture1"></div>

</body>
</html>

ZurdoDev

Как измениться? И когда?

SnvMohan

Изменение означает, что вы показываете первого человека на этом div и меняетесь на следующего человека, а затем и на следующего в миллисекундах(5 миллисекунд), когда это происходит, что человек выглядит так, как будто делает что-то точно такое же, как GIF.. Всегда его нужно менять показывая человека в этом образе

ZurdoDev

Похоже, вы устанавливаете фоновое изображение div. Так где же ты застрял? Знаете ли вы, как изменить фоновое изображение?

SnvMohan

Я нашел решение.. Спасибо за ваше время

1 Ответов

Рейтинг:
0

SnvMohan

Я попробовал следующее.. Его работа

<!DOCTYPE html>

< meta http-equiv=" X-UA-совместимый "контент=" IE=9">


&ЛТ;холст ИД="icanvas" ширина="200 пикселей" высота="404px"&ГТ;


var imgTag = новое изображение();
imgTag. src = "https://d27jyp35i1l6s7.cloudfront.net/v3.2/agni/assets/carousel/classic/new-classic/kimberly.png";
var canvas = document. getElementById ('icanvas');
var ctx = canvas. getContext ("2d");
ctx. drawImage(imgTag, 0, 0);
var lsFrameWidth = -202.0;
var lsWidth = 0;
timesRun = 1;
var interval = setInterval(функция(){
if (timesRun = = = 75){
timesRun = 1;
lsWidth = 0;
}else if (timesRun & lt; 75)
{
timesRun = timesRun + 1;
СТХ.метода clearrect(0, 0, холст.ширина, холст.высота)
ctx. drawImage(imgTag, lsWidth, 0);
lsWidth = lsWidth + (lsFrameWidth);
}
}, 90);