CSS로 캐러셀 이미지 만들기-CSS 튜토리얼-php.cn

CSS로 캐러셀 이미지 만들기

王林

풀어 주다： 2020-02-29 18:01:52

앞으로

2857명이 탐색했습니다.

CSS로 캐러셀 이미지 만들기

다음은 스타일 부분입니다.

<style>
    *{margin:0;padding:0;}
    a{text-decoration:none}
    li{list-style:none;}

로그인 후 복사

디자인 너비는 캐러셀 이미지의 전체 너비에 첫 번째 이미지의 너비를 더한 값을 초과할 수 없습니다. (캐러셀 효과가 보이도록 첫 번째 이미지의 너비가 추가됩니다.) ) I 너비는 1500이고 높이는 200이고 오버플로 숨기기를 설정합니다(표시 영역 밖으로의 움직임을 제거하고 계속 표시하기 위해)

#box{width:1500px;height:200px;margin:0 auto;overflow:hidden;}

로그인 후 복사

1000%는 너비를 설정하기 위해 게으른 쓰기 방법입니다. ul 더 넓습니다.

(추천 튜토리얼: CSS 시작 튜토리얼)

캐러셀 애니메이션 이름, 한 번 회전하는 데 걸리는 시간

#box ul{height:200px;width:1000%;animation:animal 4s linear infinite;}

로그인 후 복사

모든 이미지를 한 줄에 표시하도록 float 설정 및 이미지 너비

#box ul li{float:left;width:133px;height:200px;}

로그인 후 복사

마우스 롤오버 시 일시 정지 설정

#box:hover ul{animation-play-state:paused;}

로그인 후 복사

애니메이션의 애니메이션 이름과 캐러셀의 이동 방향 설정(애니메이션 효과)

    @keyframes animal {
        0%{margin-left:0;}
        100%{margin-left:-1463px;}
    }
</style>

로그인 후 복사

다음은 몸체 부분입니다

캐러셀은 일반적으로 클릭으로 접근이 가능하므로 a 태그에 위치합니다

<body>
<div id="box">
<ul>
    <li><a href="#"><img src="images/1.jpg" /></a></li>
    <li><a href="#"><img src="images/2.jpg" /></a></li>
    <li><a href="#"><img src="images/3.jpg" /></a></li>
    <li><a href="#"><img src="images/4.jpg" /></a></li>
    <li><a href="#"><img src="images/5.jpg" /></a></li>
    <li><a href="#"><img src="images/6.jpg" /></a></li>
    <li><a href="#"><img src="images/7.jpg" /></a></li>
    <li><a href="#"><img src="images/8.jpg" /></a></li>
    <li><a href="#"><img src="images/9.jpg" /></a></li>
    <li><a href="#"><img src="images/10.jpg" /></a></li>
    <li><a href="#"><img src="images/11.jpg" /></a></li>
    <li><a href="#"><img src="images/1.jpg" /></a></li>
    <li><a href="#"><img src="images/2.jpg" /></a></li>
    <li><a href="#"><img src="images/3.jpg" /></a></li>
    <li><a href="#"><img src="images/4.jpg" /></a></li>
    <li><a href="#"><img src="images/5.jpg" /></a></li>
    <li><a href="#"><img src="images/6.jpg" /></a></li>
    <li><a href="#"><img src="images/7.jpg" /></a></li>
    <li><a href="#"><img src="images/8.jpg" /></a></li>
    <li><a href="#"><img src="images/9.jpg" /></a></li>
    <li><a href="#"><img src="images/10.jpg" /></a></li>
    <li><a href="#"><img src="images/11.jpg" /></a></li>
    <li><a href="#"><img src="images/1.jpg" /></a></li>
</ul>
</div>
</body>

로그인 후 복사

더 많은 프로그래밍 관련 내용은 PHP 중국어 홈페이지프로그래밍 입문 컬럼을 주목해주세요!

위 내용은 CSS로 캐러셀 이미지 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!