연말까지 매일 웹 사이트를 만드는 대학생들~ 28일째 슬라이더~

입문

안녕하세요.요즘 주말에 온천 @70days_js!
나는 오늘 슬라이더를 스스로 만들었다.호버를 할 때 그림을 하얗게 만드는 곳을 제외하고는 아무것도 참고하지 않고 0부터 만들어 보세요.
처리 기술 수준은 낮지만 같은 고민을 하는 초보자에게 용기를 줄 수 있다면 좋겠다.
오늘이 28일째다.(2019/11/15)
잘 부탁드립니다.

사이트 URL

https://sin2cos21.github.io/day28.html

한 일

나는 미끄럼틀을 만들어 보았다.
화살표 버튼이나 축소판 그림을 클릭하면 이미지가 변경됩니다.
일단 gif↓로 해주세요.

하는 일은 대개 이런 느낌일 것이다.↓
1. 화살표 버튼을 클릭하여 이미지 변경
2. 축소판 그림 표시
3. 축소판 그림을 클릭하여 이미지 변경
4. 이미지 호버 시 색상 변경
그럼 1부터 순서대로 쓰세요.

1. 화살표 버튼을 클릭하여 이미지 변경

화살표는 font awesome을 사용했습니다.
html은 이런 느낌이에요.

    <div class="slider">
        <div id="left"><i class="fas fa-angle-left"></i></div>
        <img id="image" src="day24_image/photo1.jpg" alt="slider">
        <div id="right"><i class="fas fa-angle-right"></i></div>
    </div>

id = "왼쪽 화살표", 오른쪽 화살표 right.
id='image'부분에 그림을 표시합니다.
다음은 자바스크립트입니다. 슬라이더에 사용할 그림을 그룹에 넣습니다.↓

let image = [
    'day24_image/photo1.jpg',
    'day24_image/photo2.jpg',
    'day24_image/photo3.jpg',
    'day24_image/photo4.jpg',
    'day24_image/photo5.jpg'
];

그리고 요소를 가져와서 이벤트 탐지기를 열고 그룹에서 표시할 그림을 선택하십시오.↓

let img = document.getElementById('image');
let left = document.getElementById('left');
let right = document.getElementById('right');

let count = 0; //現在表示している画像の配列番号
let imageLength = image.length - 1; //4


left.addEventListener('click', imageLeftClick);
right.addEventListener('click', imageRightClick);

function imageLeftClick() {
    if (count === 0) {
        count += imageLength;
    } else {
        count--;
    }
    let src = img.getAttribute('src');
    img.setAttribute('src', image[count]);
}

function imageRightClick() {
    if (count === imageLength) {
        count = 0;
    } else {
        count++;
    }
    let src = img.getAttribute('src');
    img.setAttribute('src', image[count]);
}

let count = 0;그림에 표시된 간으로, 오른쪽 화살표를 누르면 다음 숫자의 배열 번호를 표시하고, 왼쪽을 누르면 이전 숫자의 배열 번호를 표시한다.
만약count가 0이라면 수조의 길이 부분을 더하고, 반대로count의 값이 수조의 길이에 이르면 0을 대입하여 그림을 순환시킨다.

2. 축소판 그림 표시

그 다음은 줄임말 그림의 표시이다. 이것은 id가thumbnail을 얻는 요소이고javascript로img요소를 만들어서 배열된 이미지를 모두 넣고 id가thumnail을 넣는 요소 아래에 있다.↓

let thumbnail = document.getElementById('thumbnail');

for (var i = 0; i < image.length; i++) {
    let imgElement = document.createElement('img');
    let src = image[i];
    imgElement.setAttribute('src', src);
    imgElement.setAttribute('class', "thumbnail");
    thumbnail.appendChild(imgElement);
}

그림을 조정하는 클래스입니다.
imgElement.setAttribute('class', "thumbnail");
class는 사전에 css로 씁니다.↓

.thumbnail {
    display: inline-block;
    width: auto;
    height: 90px;
    max-width: 100%;
    max-height: 100%;
    border: .1px solid white;
}

예전에 했던 놈이잖아.max-width: 100%;max-height: 100%;열면 그림이 상자에 잘 수납됩니다.이번에는width가 변할 수 있도록height의 값을 지정했습니다.

3. 축소판 그림을 클릭하여 이미지 변경

다음은 축소판을 클릭하면 그림도 바뀌는 부분이다.

let thumbnailList = document.getElementsByClassName('thumbnail');

for (var i = 0; i < thumbnailList.length; i++) {
    let thumbnail = thumbnailList[i];

    thumbnail.addEventListener('click', function displayImage(e) {
        let src = e.target.getAttribute('src');
        img.setAttribute('src', src);
    });
}

방금 축소 이미지 이미지를 생성할 때 첨부된class (이미지를 조정하는 클래스,thumbnail 클래스) 를 사용합니다.
모든 축소 그림은thumbnail 클래스가 있기 때문에 get Elements By ClassName을 함께 가져온 다음 for 분으로 각각의 축소 그림에 이벤트 탐지기를 설치합니다.
e를 매개 변수에 전달함으로써 클릭된 요소를 확정하고 이 요소의 src를 얻어 이src를img변수(이미지를 표시하는 부분)로 설정하면 이미지를 잘 표시할 수 있다.

4. 이미지 호버 시 색상 변경

마지막으로 아직 미끄러운 느낌이 없기 때문에 css로 이미지에 호버를 넣으면 살짝 하얗게 변하는 공연을 추가해 봤습니다.그럼에도 불구하고 이곳의 방법을 생각하지 못했기 때문에 사이트의 보도를 참고할 수 있도록 허락해 주십시오.
구조가 간단하다. 예를 들어 이 html 구조↓

    <div class="slider">
        <div id="left"><i class="fas fa-angle-left"></i></div>
        <img id="image" src="day24_image/photo1.jpg" alt="slider">
        <div id="right"><i class="fas fa-angle-right"></i></div>
    </div>

그림을 표시하는 id='image'의 부모 요소class='slider'의 배경을 흰색으로 만듭니다.

.slider {
    background-color: white;
}

그리고 이미지의 id='image'가 hover(아날로그 클래스)인 경우opacity 속성을 통해 투명도를 조정할 수 있기 때문에 이미지의 투명도를 약간 낮출 수 있습니다.↓

#image:hover {
    opacity: .7;
}

이것만으로도 이미지가 투명해지고 배경의 흰색이 떠오르기 때문에 호버에 의해 이미지가 얇은 흰색으로 보일 수 있습니다.

감상

드디어 웹 사이트 같은 물건을 만들었다.나는 매우 기쁘다.그냥 미끄럼틀을 조사하다가 카셀이라는 물건을 만났어요.차이를 전혀 모른다.이런 느낌은 한 걸음 한 걸음 나아가면서 두 걸음 내려가면서 노력하고 있다.이 상태로 연말에 좋은 사이트를 만들 수 있다면 정말 기쁩니다.
끝까지 읽어주셔서 감사합니다.내일도 투고할 테니 잘 부탁드립니다.

참고 자료

마우스가 멈췄을 때만 이미지를 반투명하게 만드는 CSS 쓰기 - 스타일시트 Tipshttps://www.nishishi.com/css/translucent-image-opacity.html

호버의 행동을 참고할 수 있도록 허락해 주십시오.정말 감사합니다.