改進版，添加了圖片自動適應container的功能。另外修正了動畫函數，防止滑動到最后會閃爍。
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<script type="text/javascript" src="script/jquery-2.0.3.js"></script>
<title>carousel</title>
<style>
*{ margin: 0; padding: 0; text-decoration: none;}
body { padding: 20px;}
#carousel-container { width: 1000px; height: 400px; border: 3px solid #333; overflow: hidden; position: relative;}
#carousel-list { width: 7000px; height: 400px; position: absolute; z-index: 1; left:-1000px;}
#carousel-list img {float: left;}
#carousel-buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left:50%; margin-left:-50px;}
#carousel-buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;}
#carousel-buttons span:last-child{margin-right:0px;}
#carousel-buttons .carousel-on { background: orangered;}
.carousel-arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px; position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}
.carousel-arrow:hover { background-color: RGBA(0,0,0,.7);}
#carousel-container:hover .carousel-arrow { display: block;}
#carousel-prev { left: 20px;}
#carousel-next { right: 20px;}
</style>
</head>
<body>
<div id="carousel-container">
<div id="carousel-list">
<img src="picture/輪播圖/5.jpg" alt="1"/>
<img src="picture/輪播圖/1.jpg" alt="1"/>
<img src="picture/輪播圖/2.jpg" alt="2"/>
<img src="picture/輪播圖/3.jpg" alt="3"/>
<img src="picture/輪播圖/4.jpg" alt="4"/>
<img src="picture/輪播圖/5.jpg" alt="5"/>
<img src="picture/輪播圖/1.jpg" alt="5"/>
</div>
<div id="carousel-buttons">
<span index="1" class="carousel-on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="javascript:;" id="carousel-prev" class="carousel-arrow"><</a>
<a href="javascript:;" id="carousel-next" class="carousel-arrow">></a>
</div>
<script>
window.onload = carousel();
function carousel(){
var container = document.getElementById("carousel-container");
var width = container.clientWidth;
var list = document.getElementById("carousel-list");
var buttons = document.getElementById("carousel-buttons").getElementsByTagName("span");
var prev = document.getElementById('carousel-prev');
var next = document.getElementById('carousel-next');
//用于保存當前顯示的是第幾張圖片
var index = 1;
//動畫狀態，保存動畫是否已經在運動
var animated = false;
//存放定時器，用于自動切換時候鼠標以上就終止
var timer;
//初始化輪播圖
carouselInit();
function carousel_showButton(){
//所有按鈕置灰
for(var i = 0; i < buttons.length; i++){
if(buttons[i].className == 'carousel-on'){
buttons[i].className = '';
break;
}
}
//亮起按鈕
buttons[index-1].className = 'carousel-on';
}
//圖片切換函數
function carousel_animate(offset) {
animated = true;
//將要運動到的位置
var newLeft = list.offsetLeft + offset;
//位移總時間
var time = 300;
//位移間隔時間
var interval = 10;
//每次的位移量,往左是正，往右是負
var speed = offset/(time/interval);
//最初和最末尾圖片的位置
var first = -width;
var last = -(width*buttons.length);
function carousel_go(){
if(speed < 0 && list.offsetLeft > newLeft) {
//如果是向右滑動的話
if(list.offsetLeft + speed < newLeft){
list.style.left = newLeft + 'px';
} else {
list.style.left = list.offsetLeft+ speed + 'px';
}
//遞歸動畫
setTimeout(carousel_go, interval);
} else if(speed > 0 && list.offsetLeft < newLeft) {
//如果是向左滑動的話
if(list.offsetLeft + speed > newLeft){
list.style.left = newLeft + 'px';
} else {
list.style.left = list.offsetLeft+ speed + 'px';
}
setTimeout(carousel_go, interval);
} else {
//位移完成后的工作
animated = false;
list.style.left = newLeft + 'px';
//如果圖片要從第一張切換到最后一張
if(newLeft > first){
list.style.left = last + 'px';
}
//如果圖片要從最后一張切換到第一張
if(newLeft < last){
list.style.left = first + 'px';
}
//debugger;
}
}
carousel_go();
}
//輪播圖自動切換功能
function carousel_play(){
timer = setInterval(function(){
next.onclick();
}, 3000);
}
//輪播圖停止切換
function carousel_stop(){
//清除定時器
clearInterval(timer);
}
next.onclick = function(){
//如果當前已經有動畫在跑則什么都不作
if(animated){
return;
}
if(index == 5){
index = 1;
} else {
index += 1;
}
carousel_showButton();
carousel_animate(-width);
}
prev.onclick = function(){
//如果當前已經有動畫在跑則什么都不作
if(animated){
return;
}
if(index == 1){
index = 5;
} else {
index -= 1;
}
carousel_showButton();
carousel_animate(width);
}
for(var i = 0; i < buttons.length; i++){
buttons[i].onclick = function(){
//點擊的元素是已經在顯示了的或者有有動畫正在運行的，就不執行接下來的代碼
if(this.className == 'on' || animated){
return;
}
//獲取被點擊元素的序列
var myIndex = parseInt(this.getAttribute('index'));
var offset = (-width) * (myIndex - index);
carousel_animate(offset);
index = myIndex;
carousel_showButton();
}
}
//設置初始自動移動
container.onmouseover = carousel_stop;
container.onmouseout = carousel_play;
carousel_play();
}
//初始化輪播圖
function carouselInit(){
//設置每個img的大小適合容器container
var container = document.getElementById("carousel-container");
var list = document.getElementById("carousel-list");
var imgs = list.getElementsByTagName("img");
for(var i = 0, j = imgs.length; i < j; i++){
imgs[i].style.height = '100%';
imgs[i].style.width = container.clientWidth + 'px';
}
}
</script>
</body>
</html>
everlose
2014-10-03
0 回答
舉報
0/150
提交
取消
