HTML5圖片往上輪播的代碼
HTML5是最新的HTML版本，其中許多新特性都是關(guān)于圖片和視頻的。其中之一是圖片往上輪播的功能。下面是一個(gè)簡(jiǎn)單的示例代碼：
在HTML文件中引入jQuery庫(kù)：
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>創(chuàng)建一個(gè)div容器并設(shè)置其樣式，然后在該容器中插入多張圖片：
<div class="banner">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
<img src="image5.jpg">
</div>
<style>
.banner {
width: 100%;
height: 400px;
overflow: hidden;
position: relative;
}
.banner img {
width: 100%;
height: 400px;
position: absolute;
left: 0;
top: 0;
}
</style>使用jQuery來(lái)實(shí)現(xiàn)圖片輪播功能，通過(guò)設(shè)置定時(shí)器，每隔3秒鐘就將容器中的第一張圖片往上移動(dòng)一個(gè)圖片的高度，然后將該圖片插入到容器末尾，實(shí)現(xiàn)循環(huán)輪播效果。代碼如下：
<script>
$(function() {
var timer = null;
var height = $('.banner img:first').height(); // 獲取每張圖片的高度
timer = setInterval(function() {
$('.banner img:first').animate(
{marginTop: -height + 'px'},
1000,
function() {
$(this).css('marginTop', 0);
$(this).appendTo('.banner');
}
);
}, 3000);
});
</script>這樣就能實(shí)現(xiàn)一個(gè)簡(jiǎn)單的HTML5圖片往上輪播的效果了。通過(guò)設(shè)置樣式和調(diào)整定時(shí)器中的參數(shù)，可以實(shí)現(xiàn)不同的輪播效果。
上一篇一行顯示 css樣式
下一篇html5圖片變大代碼