[Java] Rolling banner

main.css

0.00MB

rollingbanner.html

0.00MB

 

• li로 이미지를 잡으면 약간의 공간이 생김. 라인의 값이 있어서 처리를 못한 것임. inline이므로 block을 주고 line-height:0으로 주면 공간이 없어짐

img{

    display:block;

    line-height:0;

}

• Display:none   모두 사라짐

• 상위 li element에 absolute를 주면.. banner가 겹쳐져서 보여짐

 

• 새로운 CSS
  
  • Fadein 효과

#banner > ul > li.fadein{

    animation:fadein 3s;

}

• 투명효과 주기

@keyframes fadein{

    from{

 

    }

    to{

        

    }

}

 

on을 옮기면서 실행 

setattribute를 줘서 on을 계속 주면서 바꿔줄 예정 

 

querySelectorAll로 인해서 밑에 document가 아닌 item으로 써줌

bannerImg = document.querySelectorAll('.banner1 > li');

       

           if (index>=bannerImg.length) {

               index=0;

           }

 

           bannerImg.item(index).setAttribute('class','show on');