改进版，添加了图片自动适应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
1 回答
举报
0/150
提交
取消
