JavaScript實例-幻燈片
幻燈片是一個被廣泛運用于網絡上展示圖片、產品、服務等的一種常用的網站設計效果。幻燈片（Slider）設計的效果越來越復雜和多樣化，但基礎的幻燈片功能仍然不變，JavaScript通過實現一個輪播器來實現幻燈片的功能，輪播器通過JavaScript技術實現了一些效果，如控制滑動方向、速度、圖片數量、觸摸、自動播放等等。
這里介紹了一個使用JavaScript實現幻燈片的示例：
<!DOCTYPE html>
<html>
<head>
<title>JavaScript實例-幻燈片</title>
<style>
.slider {
position: relative;
height: 500px;
overflow: hidden;
margin: 20px auto;
}
.slider ul {
position: absolute;
left: 0;
top: 0;
width: 2000%;
height: 500px;
margin: 0;
padding: 0;
}
.slider ul li {
display: inline-block;
width: 20%;
height: 500px;
}
.slider ul li img {
width: 100%;
height: 100%;
display: block;
}
.slider .prev, .slider .next {
position: absolute;
top: 50%;
margin-top: -60px;
width: 50px;
height: 120px;
text-align: center;
line-height: 120px;
background: rgba(0,0,0,0.5);
color: #fff;
text-decoration: none;
border-radius: 60px;
z-index: 999;
cursor: pointer;
opacity: 0.5;
transition: all .2s;
}
.slider .prev:hover, .slider .next:hover {
opacity: 1;
}
.slider .prev {
left: -50px;
}
.slider .next {
right: -50px;
}
</style>
</head>
<body>
<div class="slider">
<ul>
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
<li><img src="img/5.jpg"></li>
</ul>
<a href="javascript:;" class="prev"><<<<</a>
<a href="javascript:;" class="next">>>>></a>
</div>
</body>
</html>上述代碼實現了一個簡單的輪播功能。輪播器的實現通過JavaScript技術實現一些效果，如控制滑動方向、速度、圖片數量、觸摸、自動播放等等。
有些輪播器效果遠比上述示例要復雜，但將基礎的代碼進行梳理，拆分成組件，可以開發出更加復雜多樣的輪播器。如果你想開發一個高效、快速、低耗、流暢的輪播器，那么JavaScript實現的輪播器就是一個不錯的選擇。在實現的過程中， JavaScript技術是必不可少的，通過自學可以開發出更多適合自己網站的輪播器。
上一篇css乘法口訣表翻轉
下一篇css從內部描邊