ホームページ > ウェブフロントエンド > jsチュートリアル > JSネイティブカルーセルチャートのコード共有例

JSネイティブカルーセルチャートのコード共有例

零下一度
リリース: 2017-07-24 20:09:14
オリジナル
1507 人が閲覧しました

以下のエディターは、白い点が付いた 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部分:


rrreええ

それです! !わかりますか? ?

以上がJSネイティブカルーセルチャートのコード共有例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート