CSS3中的圖片滑動效果是現代網站設計比較常用的一種效果,它可以為網站增添一些動態效果,讓用戶瀏覽網站更加流暢和有趣。
下面介紹一種使用CSS3來實現圖片滑動效果的方法:
HTML結構:
<div id="slider">
<ul>
<li><img src="img1.jpg" alt=""></li>
<li><img src="img2.jpg" alt=""></li>
<li><img src="img3.jpg" alt=""></li>
</ul>
</div>
CSS樣式:
#slider {
overflow: hidden;
position: relative;
}
#slider ul {
list-style: none;
width: 300%;
overflow: hidden;
position: relative;
left: 0;
transition: all 0.5s ease-in-out;
}
#slider ul li {
float: left;
width: 33.33333%;
}
#slider ul li img {
width: 100%;
height: auto;
}
JS代碼:
var slider = document.getElementById("slider");
var sliderUl = slider.querySelector("ul");
var sliderLi = slider.querySelectorAll("li");
var sliderNav = slider.querySelectorAll("nav a");
var current = 0;
var num = sliderLi.length;
var timer;
sliderUl.style.width = num * 100 + "%";
for (var i = 0; i< num; i++) {
var li = document.createElement("li");
var a = document.createElement("a");
sliderNav[i] = a;
sliderNav[i].addEventListener("click", function () {
current = i;
navActive();
animate(sliderUl, -current * 100);
});
li.appendChild(a);
sliderNav[i] = li;
}
sliderNav[0].className = "active";
slider.appendChild(document.createElement("nav")).appendChild(document.createElement("ul"));
for (var i = 0; i< num; i++) {
slider.querySelector("nav ul").appendChild(sliderNav[i]);
}
function navActive() {
for (var i = 0; i< num; i++) {
sliderNav[i].className = "";
}
sliderNav[current].className = "active";
}
function animate(obj, target) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var leader = obj.offsetLeft;
var step = (target - leader) / 10;
step = step >0 ? Math.ceil(step) : Math.floor(step);
obj.style.left = leader + step + "%";
if (leader == target) {
clearInterval(obj.timer);
}
}, 20);
}
timer = setInterval(autoPlay, 5000);
function autoPlay() {
current += 1;
current = current == num ? 0 : current;
navActive();
animate(sliderUl, -current * 100);
}
代碼中,首先定義了一個id為slider的div容器,然后在其中放置了一個ul列表,ul中包含了多張圖片,每張圖片都使用li包裹。接著,利用CSS樣式設置容器的樣式和ul列表的樣式,以及每個li和img的樣式。最后,通過JS代碼中的animate函數和autoPlay函數,實現了圖片切換效果和自動輪播效果。
以上就是使用CSS3來實現圖片滑動效果的方法,這種方法可以輕松地讓網站增添一些動態效果,提升用戶的瀏覽體驗。