HTML5 多圖輪播是網(wǎng)頁設計中常用的技術(shù)之一。通過這種方式，可以讓網(wǎng)頁瀏覽者更加直觀地了解產(chǎn)品或服務。以下是一個簡單的HTML5多圖輪播的代碼示例:
<html>
<head>
<title>多圖輪播</title>
<style>
/* 樣式表 */
#slider{
width: 800px;
height: 400px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
#slider ul{
list-style: none;
padding: 0px;
margin: 0px;
width: 2400px;
position: relative;
}
#slider ul li{
float: left;
}
#slider .control{
position: absolute;
width: 100%;
height: 20px;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 10;
text-align: center;
}
#slider .control a{
display:inline-block;
margin: 0 5px;
width: 10px;
height:10px;
background:rgba(255, 255, 255, 0.5);
border-radius:50%;
text-decoration:none;
}
#slider .control a.active{
background:rgba(255, 255, 255, 1);
}
</style>
</head>
<body>
<div id="slider">
<ul>
<li><img src="image1.jpg"></li>
<li><img src="image2.jpg"></li>
<li><img src="image3.jpg"></li>
</ul>
<div class="control">
<a class="active" href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</div>
<script>
/* JS腳本 */
//獲取幻燈片容器
var slider=document.getElementById('slider');
//獲取圖片列表對象
var slider_main=slider.getElementsByTagName('ul')[0];
//獲取圖片列表中所有圖片對象
var images=slider_main.getElementsByTagName('li');
//獲取控制按鈕容器對象
var slider_ctrl=slider.getElementsByClassName('control')[0];
//聲明并初始化變量
var timer=null;
var index=0;
//創(chuàng)建控制按鈕，為按鈕添加單擊事件
for(var i=0;i<images.length;i++){
var li=document.createElement('a');
li.href="#";
li.index=i;
if(i==index){
li.className="active";
}
li.onclick=function(){
var num=this.index-index;
play(num);
}
slider_ctrl.appendChild(li);
}
//自動播放函數(shù)
function autoPlay(){
timer=setInterval(function(){
play(1);
},3000);
}
autoPlay();
//播放函數(shù)，控制圖片的切換
function play(num){
index+=(num||1);
if(index>=images.length){
index=0;
}
else if(index<0){
index=images.length-1;
}
//讓當前顯示的圖片淡入顯示，其他的圖片淡出隱藏
for(var i=0;i<images.length;i++){
images[i].style.opacity=0;
slider_ctrl.children[i].className="";
}
images[index].style.opacity=1;
slider_ctrl.children[index].className="active";
}
//鼠標移入幻燈片容器，停止自動播放
slider.onmouseover=function(){
clearInterval(timer);
}
//鼠標移出幻燈片容器，繼續(xù)自動播放
slider.onmouseout=function(){
autoPlay();
}
</script>
</body>
</html>以上代碼基本實現(xiàn)了一個簡單的多圖輪播效果，通過JS腳本實現(xiàn)自動播放、手動點擊切換等功能。在實際使用中，可以根據(jù)需求修改樣式表和JS腳本，例如調(diào)整圖片大小、數(shù)量及切換效果等，以達到更好的用戶體驗效果。