JS 네이티브 캐러셀 이미지 예시 공유

친구 여러분, 저는 최근 새로운 프로젝트를 진행하고 있습니다. 그래서 업데이트가 안됐어요! 나를 그리워했나요? !

오늘은 JS 네이티브 캐러셀 이미지에 대해 이야기해보겠습니다!

할 말이 많지 않습니다.

코드로 바로 이동하겠습니다. CSS 부분은 다음과 같습니다.

*{
    padding: 0px;
    margin: 0px;
   }
   img{
    width: 500px;
    height: 300px;
   }
   li{
    float: left;
   }
   ul{
    width: 2000px;
    list-style: none;
    position: absolute;
   }
   p{
    width: 500px;
    height: 300px;
    /*溢出部分隐藏*/
    overflow: hidden;
    margin: 60px auto;
    position: relative;
   }

HTML 부분입니다!

<p>
 <ul>
  <li><img src="img/1.jpg" /></li>
  <li><img src="img/2.jpg"/></li>
  <li><img src="img/3.jpg"/></li>
  <li><img src="img/1.jpg" /></li>
 </ul>
</p>

다음은 JS 부분입니다.

//1、获取到ul
   var ul = document.getElementsByTagName("ul")[0];
   var x = 0;
   
   //id 用来关闭定时器的
   var id = setInterval(abc,10);
   
   function abc(){
    ul.style.left = x-- +"px";
    
    //如果到第三周图片了
    if(x == -1500){
     x = 0;//把ul修改成第一张图片
     ul.style.left = x+"px";
    }
    if(x % 500 == 0){ //第一张图片进来
     clearInterval(id); //关闭定时器
     //开启定时器 隔半秒钟开启定时器
     setTimeout(function(){
      //500毫秒之后开启定时器，继续执行
      id = setInterval(abc,10);
     },500);//setTimeout 延时执行
    }
   }

정말 간단합니다! 배웠나요? ?

위 내용은 JS 네이티브 캐러셀 이미지 예시 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!