아래 편집기는 흰색 점이 있는 JS 기본 캐러셀 이미지를 제공합니다예제를 통한 설명. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다. 편집기를 따라가서 살펴보겠습니다
JS 기본 캐러셀 이미지에 대해 방금 이야기했습니다. 이제 함께 움직일 수 있는 작은 점을 추가해 보겠습니다!
css 코드:
*{ margin:0px; padding: 0px; } ul{ width: 2500px; height: 300px; position: absolute; } li{ float: left; list-style: none; } img{ width: 500px; height: 300px; } p{ width: 500px; height: 300px; margin: 50px auto; position: relative; overflow: hidden; } /*小白点的ul*/ #round_ul{ width:300px; height: 30px; /*background:yellow;*/ position: relative; margin: 250px auto; } #round_ul li{ width: 20px; height:20px; border-radius: 50%; background: #2196f3; margin-left: 50px; cursor: pointer; }
HTML 코드:
<p> <ul> <li><img src="img/31.jpg"></li> <li><img src="img/32.jpG"></li> <li><img src="img/33.jpG"></li> <li><img src="img/34.jpg"></li> <li><img src="img/31.jpg"></li> </ul> <ul id="round_ul"> <li></li> <li></li> <li></li> <li></li> </ul>
JS 부분:
그렇구나! ! 이해했나요? ?
위 내용은 js 네이티브 캐러셀 차트의 코드 공유 예시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!