欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

html qq滑動效果代碼

傅智翔2年前8瀏覽0評論

HTML中的QQ滑動效果是一種常用的網頁設計樣式,它可以使頁面呈現出流暢平滑的滑動效果,為用戶帶來更好的視覺體驗。以下是一段QQ滑動效果的代碼示例:

<style>
.slide-wrapper {
width: 100%;
overflow: hidden;
}
.slide-container {
display: flex;
transition: transform 0.3s ease;
}
.slide-item {
flex-shrink:0;
width: 100%;
height: 200px;
margin-right: 10px;
}
.slide-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
<div class="slide-wrapper">
<div class="slide-container">
<div class="slide-item"><img src="1.jpg" alt=""></div>
<div class="slide-item"><img src="2.jpg" alt=""></div>
<div class="slide-item"><img src="3.jpg" alt=""></div>
</div>
</div>
<script>
let wrapper = document.querySelector('.slide-wrapper');
let container = document.querySelector('.slide-container');
let items = document.querySelectorAll('.slide-item');
let currentIndex = 0;
setInterval(() =>{
if (currentIndex === items.length - 1) {
currentIndex = 0;
} else {
currentIndex++;
}
container.style.transform = `translateX(-${currentIndex}00%)`;
}, 3000);
</script>

以上代碼中用到的主要技術包括了CSS的flex布局和transform屬性以及JS的定時器函數setInterval。其中,class為slide-item的元素即為需要滑動的圖片項,通過容器的transform屬性不斷改變其translateX值,從而實現滑動效果。此外,JS的setInterval函數可以讓頁面每隔一段時間自動滑動到下一張圖片,使用戶獲得更好的交互體驗。