javaScript/JS Examples

타이머 함수 : 심플이미지 배너

mooyou 2019. 8. 9. 08:23
728x90
300x250
SMALL

요구사항)

01_1초에 한 번씩 배열에 들어있는 이미지를 순차적으로 전환

02_ 이미지가 무한 반복해서 전환되도록

 

이미지 변경방법

$images.attr("src", 이미지이름);

 

        <script>

            $(document).ready(function() {
                var currentIndex = 1;
                var imgList = ["logo_01.jpg", "logo_02.jpg", "logo_03.jpg", "logo_04.jpg", "logo_05.jpg"];
                var $banner = $(".banner1");
				
                 setInterval(function(){
                 	currentIndex++;
                    if(currentIndex >= imgList.length)
                       currentIndex = 0;
                       
                    var imgName = imgList[currentIndex];
                    $banner.attr("src", "./images/" + img Name);
                    
                },100);
  
                
            })
        </script>
        
        <body>
            <img src="images/logo_01.jpg" class="banner" id="banner1">
         </body>
728x90
반응형
LIST
저작자표시 비영리 변경금지 (새창열림)