javascript(3.25)

img{ display: block;  line-height: 0;}

이미지마다 조금에 간격이있을때 line-height:0 을 주면 간격을 없앨수 있다.

이미지는 인라인이기 때문에 블럭으러 바꿔주어야 한다.

 

absolute를 난발하면 원하는 위치에 옮기기가 어려워진다. 그래서 2dex 안에 끝내는게 쉬울것.

 

*애니메이션 효과 주는 방법.

0 에서 1 까지 가는 데 3초가 걸리도록 코드를 친것.

크로스 브라우저 가 아니라면 그 브라우저마다 구동 방법이 다르기 때문에 숙지하고 있어야한다.

내가 준 명령이 어떤 브라우져에서는 구동이 안될수있다.

.fadein{ animation: fadein 3s;}
@keyframes fadein{ from{ opacity:0;}to{opacity:1;} }

*애니메이션 줄때 쓴 css

img{ display: block; line-height: 0;}
#banner{ position: absolute; top: 300px;}
#banner>ul>li{ position: absolute; top: 0; display: none;}
#banner > ul > li.fadein{ animation: fadein 3s;}
#banner > ul > li.on{ display: block;}
@keyframes fadein{ from{opacity:0;} to{ opacity:1; } }

*if 문 활용 

5개에 사진에 돌아가면서 효과를 주기위해서 0~4까지 원하는 시간마다 순서대로 돌아가게 하기 위해서 

변수에 0을 지정해주고  변수가 5보다 크거나 같아지면 다시 0으로 돌아가게 한다.

숫자는 1씩 증가하게 해줬다.

var index = 0;
    function banner(){
     if(index >=5){ index=0; }
        index++
        console.log(index);
    }
    setInterval(banner,1000)

*순서대로 효과주기

for문이 실해되는 조건을 만들어서 i 와 index 값이 같아지면 setAttribute 를 활용하여 원하는 내가 원하는 class name으로 변경하여 이게 실행되는 그 사진만 보여지게 된다. 

그러게 하기 위해 css를 따로 만들어 나와 한다.

var index = 0;
        function banner( {
            bannerImg = document.querySelectorAll('.banner1>li');
            if (index >= bannerImg.length) {
                index = 0;
            }
            for (i = 0; i < bannerImg.length; i++){
                console.log(i,index);
                if (i == index) {
                    bannerImg.item(i).setAttribute('class', 'fadein on');
                } else {
                    bannerImg.item(i).setAttribute('class', 'fadein');
                }
            }
            index++;
        }

 

*버튼 만들기!

어제 만들던 버튼을 업그레이드 해봤다. 어제는 클릭했을때 멈추는 기능까지 만들었다.

이번에는 누르면 움직이고 다시 누르면 멈추는 기능을 만들었는데 두가지 방법으로 만들어 보았다.

*첫번째는 먼저 변수에 true값을 줘서 클릭하면 값이  false 바뀌면서 움직이고 다시 클릭하면 값이 true로 바뀌면서 작동을 멈추는 방식이다.

it_spot = true;
        function stop() {
            if (it_spot == true) {
                it_spot = false;
                x = setInterval(rolling, 100);
            } else {
                it_spot = true;
                clearInterval(x);}
        }
       

*두번째꺼는 첫번째를 활용 해서 임의값을 주지않고 value 값을 활용해서 start를 누르면 stop으로 바뀌면서 작동을 하게

조건을 주고 또 다시 누르면 value 값이 start로 바뀌면서 멈추게 조건을 줘 봤다.

function control() {
        if (document.querySelector('.start').value == 'start') {
            document.querySelector('.start').value = 'stop';
            x = setInterval(rolling, 100);
        } else{
            document.querySelector('.start').value = 'start';
            clearInterval(x);}
    } 

* 효과를 주기위한 script....

 

        var index = 0;
        var rolling = null;
        banner(0);
        function banner(n) {
            bannerImg = document.querySelectorAll('.banner1>li');
            if (index >= bannerImg.length) {
                index = 0;}
            if (n != undefined) {/*인자값있을때 banner() 실행될때*/
                index = n;}
            for (i = 0; i < bannerImg.length; i++) {
                console.log(i, index);
                if (i == index) {
                    bannerImg.item(i).setAttribute('class', 'fadein on');
                } else {
                    bannerImg.item(i).setAttribute('class', 'fadein');}
            }
            index++; }

        function bannerBtn(n) {
            clearInterval(rolling);
            banner(n) 
            rolling = setInterval(banner, 3000);
        }
        rolling = setInterval(banner, 3000);

**오류가 있을때 어떤부분이 작동이 안되는지 먼저 체크 후에 세세히 파고 들어야 된다. 

 background-color: rgb(58, 45, 45);