이미지에 마우스를 올리면 2초 간격으로 이미지가 바뀌도록 구현했습니다.

gif 움짤과 가장 큰 차이점은, 

일단 복잡한 구성의 스크립트를 이용한다는 것이고

마우스를 올리는 조건이 충족되어야 발동한다는 점입니다.




<center>

<div style="display:block; width:300px; height:300px; overflow:hidden; border:1px solid red;"
data-inven-over-css="{
'img_1':{'visibility':'hidden'},
'img_2':{'visibility':'hidden'},
'img_3':{'visibility':'hidden'},
'img_4':{'visibility':'hidden'}
}">
<div style="display:block; width:3000px; height:300px;">

<div style="display:inline-block; width:300px; height:300px; float:left; z-index:5; transition:2s; position:relative; left:0px; 
background:url('https://upload2.inven.co.kr/upload/2017/12/12/bbs/i14310135558.jpg') center / 100% 100% no-repeat;" data-inven-id="img_1"></div>

<div style="display:inline-block; width:300px; height:300px; float:left; z-index:4; transition:4s; position:relative; left:-300px;
background:url('https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16095224820.jpg') center / 100% 100% no-repeat;" data-inven-id="img_2"></div>

<div style="display:inline-block; width:300px; height:300px; float:left; z-index:3; transition:6s; position:relative; left:-600px;
background:url('https://upload2.inven.co.kr/upload/2017/11/26/bbs/i16040423603.jpg') center / 100% 100% no-repeat;" data-inven-id="img_3"></div>

<div style="display:inline-block; width:300px; height:300px; float:left; z-index:2; transition:8s; position:relative; left:-900px;
background:url('https://upload2.inven.co.kr/upload/2017/12/12/bbs/i14379872606.png') center / 100% 100% no-repeat;" data-inven-id="img_4"></div>

<div style="display:inline-block; width:300px; height:300px; float:left; z-index:1; transition:10s; position:relative; left:-1200px;
background:url('https://upload2.inven.co.kr/upload/2017/12/12/bbs/i13372744230.jpg') center / 100% 100% no-repeat;" data-inven-id="img_5"></div>


</div>
</div>

</center>
 


각각 이미지마다 사용된  transition 속성이 이미지의 전환 시간을 결정합니다.