以下のエディターは、白い点が付いた 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 中国語 Web サイトの他の関連記事を参照してください。