ホームページ > 記事 > ウェブフロントエンド > HTMLカルーセルチャートの実装方法
#このチュートリアルの動作環境: Windows7 システム、html5 バージョン、DELL G3 コンピューター。HTML カルーセル画像の実装方法: 最初にコントロールを画像表示領域として使用し、画像は同じ領域に表示されます。次に、Js を介して一度に 1 つの画像のみを表示するトラバーサル関数を記述します。最後に、タイマーを通じてこの関数を時々呼び出すだけです。
HTML カルーセル画像の実装方法:
1. コントロールを画像表示領域として使用すると、画像は同じ領域に表示されます。 2.style = " display: none " のように、一度に 1 つの画像だけを表示するトラバーサル関数を Js を介して作成します。他の画像を非表示にすることもできます。
<!-- 语言: Html、Css、Javascript --> <!-- 工具: HbuilderX --> <!-- 使用Ctrl+/ 可快速多行注释/取消注释 --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播图测试</title> <!-- 外部导入Css文件,链接式 --> <link type="text/css" rel="stylesheet" href="css/slideShow.css"/> </head> <body> <p>测试轮播图</p> <hr id="hr1"/> <!-- 建立一个div控件作为图片框 --> <div class="imgBox"> <!-- alt:图片路径失败时替换显示内容 --> <img class="img-slide img" src="img/img1.jpg" alt="img1"> <img class="img-slide img" src="img/img2.jpg" alt="img2"> <img class="img-slide img" src="img/img3.jpg" alt="img3"> <img class="img-slide img" src="img/img4.jpg" alt="img4"> <img class="img-slide img" src="img/img5.jpg" alt="img5"> </div> </body> <script type="text/javascript"> // index:索引, len:长度 var index = 0, len; // 类似获取一个元素数组 var imgBox = document.getElementsByClassName("img-slide"); len = imgBox.length; imgBox[index].style.display = 'block'; // 逻辑控制函数 function slideShow() { index ++; // 防止数组溢出 if(index >= len) index = 0; // 遍历每一个元素 for(var i=0; i<len; i++) { imgBox[i].style.display = 'none'; } // 每次只有一张图片显示 imgBox[index].style.display = 'block'; } // 定时器,间隔3s切换图片 setInterval(slideShow, 3000); </script> </html>CSS:
/* 标签选择器 */ p { text-align: center; font-size: 25px; color: cadetblue; font-family: fantasy; } /* id选择器 */ #hr1 { background-color: cadetblue; height: 2px; width: 75%; } /* 类选择器 */ .imgbox { border-top: 5px solid cadetblue; /* 避免因窗口变化影响图片效果 */ width: 60%; height: 40%; margin: 0 auto; } .img { width: 60%; height: 40%; margin: 0 auto; display: none; }ランニング効果:
関連学習の推奨事項:
以上がHTMLカルーセルチャートの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。