javascript實現輪播圖效果
阿新 • • 發佈：2018-11-25
<!DOCTYPE html>
<html>
<head>
<title>js輪播圖</title>
<style type="text/css">
#container{
width: 600px;
height: 400px;
position: relative;
left: 30%;
top: 100px;
border: 1px solid #000;
overflow: hidden ;
}
#list{
width: 4200px;
height: 400px;
position: absolute;
}
#list img{
width: 600px;
height:400px;
float: left;
}
#buttons{
height: 15px;
width: 250px;
position: absolute;
bottom: 20px;
left: 200px;
}
#buttons span{
width: 15px;
height: 15px;
border: 1px solid #fff;
border-radius: 50%;
background: #333;
float: left;
margin-right:25px;
cursor: pointer;
}
#buttons .on{
background: orange;
}
.arrow {
display: none;
cursor: pointer;
position: absolute;
top: 180px;
left: 20px;
width: 40px;
height: 40px;
font-size: 36px;
font-weight: bold;
line-height: 39px;
text-align: center;
background-color: RGBA(0, 0, 0, .4);
color: #fff;
}
.arrow:hover {
background-color: RGBA(0, 0, 0, .7);
}
#container:hover .arrow {
display: block;
}
#next{
left: 540px;}
</style>
<script>
window.onload = function() {
var container = document.getElementById("container");
var list = document.getElementById("list");
var buttons = document.getElementById("buttons").getElementsByTagName("span");
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var index = 1;
var timer;
//animate 函式，在當前left值得基礎上向右移動 offset px,如果向左移動距離超過圖六位置就變為圖一位置，向右移動距離超過圖二位置就變為圖七位置
function animate(offset) {
var newLeft = parseInt(list.style.left) + offset;
list.style.left = newLeft + 'px';
if (newLeft > -600) {
list.style.left = -3000 + 'px';
}
if (newLeft < -3000) {
list.style.left = -600 + 'px';
}
}
//將當前顯示圖片對應的小圓點樣式改變
function buttonsShow() {
//將所有的小圓點的樣式清除
for (var i = 0; i < buttons.length; i++) {
if (buttons[i].className == "on") {
buttons[i].className = "";
}
}
//陣列從0開始，故index需要-1
buttons[index - 1].className = "on";
}
//點選產生檢視前一張效果，animate移動距離改變，小圓點顯示改變，當index=1時還要檢視前一張時，index變為5
prev.onclick = function () {
index -= 1;
if (index < 1) {
index = 5
}
buttonsShow();
animate(600);
};
//點選產生檢視後一張效果，animate移動距離改變，小圓點顯示改變
next.onclick = function () {
index += 1;
if (index > 5) {
index = 1
}
animate(-600);
buttonsShow();
};
//通過定時器呼叫next.onclick（）實現每兩秒滾動一次
function play() {
//重複執行的定時器
timer = setInterval(function () {
next.onclick();
}, 2000)
}
//清除定時器實現停止滾動
function stop() {
clearInterval(timer);
}
container.onmouseover = stop; //在滑鼠進入onmouseover時，停止每兩秒滾動一次
container.onmouseout = play; //在滑鼠離開onmouseover時，開始每兩秒滾動一次
play(); //在onload後就呼叫play()
//為每個小按鈕新增onclick事件，當點選按鈕時會跳動到按鈕對應的圖片
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function() {
//優化，當前圖片點選當前的小圓點不執行以下程式碼。
if (this.className == "on") {
return;
}
/* 這裡獲得滑鼠移動到小圓點的位置，用this把index繫結到物件buttons[i]上，去谷歌this的用法 */
/* 由於這裡的index是自定義屬性，需要用到getAttribute()這個DOM2級方法，去獲取自定義index的屬性*/
var clickIndex = parseInt(this.getAttribute('index'));
var offset = 600 * (clickIndex - index); //這個index是當前圖片停留時的index
animate(-offset);
index = clickIndex; //存放滑鼠點選後的位置，用於小圓點的正常顯示
buttonsShow();
}
}
}
</script>
</head>
<body>
<div id="container">
<div id="list" style="left: -600px;">
<img src="img2/05.png" alt="">
<img src="img2/01.png" alt="">
<img src="img2/02.png" alt="">
<img src="img2/03.png" alt="">
<img src="img2/04.png" alt="">
<img src="img2/05.png" alt="">
<img src="img2/01.png" alt="">
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<em id="prev" class="arrow"><</em>
<em id="next" class="arrow">></em>
</div>
</body>
</html>