HTML5是一種通用的標記語言，通過它能夠創(chuàng)建出非常豐富的交互式頁面。其中，左右滑動效果是一種在移動端網頁中非常常見的交互方式，它能夠讓內容在不切換頁面的情況下進行切換。下面是一個簡單的HTML5左右滑動的代碼：
<html>
<head>
<meta charset="utf-8">
<title>左右滑動效果</title>
<style>
.container {
width: 300px;
height: 200px;
overflow: hidden;
}
.gallery {
width: 900px; /* 3個圖片的寬度 */
height: 200px;
display: flex;
transition: all 0.3s ease; /* 過渡效果 */
}
.gallery img {
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="gallery">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
</div>
<script>
var container = document.querySelector('.container');
var gallery = document.querySelector('.gallery');
var galleryWidth = gallery.offsetWidth; // 圖片容器寬度
var currentIndex = 0; // 當前圖片的索引
setInterval(function() {
currentIndex = currentIndex< 2 ? currentIndex + 1 : 0;
gallery.style.transform = `translateX(-${galleryWidth * currentIndex}px)`;
}, 2000);
</script>
</body>
</html>上述代碼中，首先定義了一個容器div元素和一個圖片容器div元素，然后給圖片容器設置了display: flex;以及過渡效果，再定義一個間隔2s輪播的js函數，每次切換圖片時都將圖片容器向左移動一個圖片的寬度。
上一篇html5嵌入視頻代碼
下一篇html5左邊盒子設置