다음은 스타일 부분입니다.
<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!