js实现轮播图

/**
* Created by plter on 8/16/16.
*/

(function () {

/**
* 容纳轮播图片Div的容器
* @type {Element}
*/
var carouselContent = document.querySelector("#carousel .carousel-content");

/**
* 图片在数组中的位置
* @type {number}
*/
var imageIndex = 0;

/**
* 用于切换图片的计时器
* @type {number}
*/
var switchImageTimerId = -1;

/**
* 该变量用于指示当前是否正在切换图片
* @type {boolean}
*/
var switchImageAnimationPlaying = false;

/**
* 把一个对象从某位置移动到目标位置
* @param target 被移动的对象
* @param fromX 开始left位置
* @param toX 结束点的left位置
* @param fromY 开始点的top位置
* @param toY 结束点的top位置
* @param duration 动画效果共花费的时间,单位是毫秒
* @param completeHandler 动画完成后的回调函数
*/
function moveTo(target, fromX, toX, fromY, toY, duration, completeHandler) {
var fps = 50;//frames per second
var frameDuration = Math.round(1000 / fps);
var frames = Math.round(duration / 1000 * fps);
var frameIndex = 0;
var x = fromX, y = fromY;
var speedX = (toX - fromX) / frames;
var speedY = (toY - fromY) / frames;

var id = setInterval(function () {

x += speedX;
y += speedY;

frameIndex++;
if (frameIndex >= frames) {
clearInterval(id);
x = toX;
y = toY;

if (completeHandler) {
completeHandler(target);
}
}

target.style.left = x + "px";
target.style.top = y + "px";
}, frameDuration);
}

/**
* 根据一个图片的url创建一个包括img的div
* @param imgSrc {String} 图片的url
* @param linkUrl {String} 轮播图链接地址
* @returns {HTMLDivElement} 被创建的div
*/
function createImageContainer(imgSrc, linkUrl) {
var div = document.createElement("div");
div.className = "image-container";

var a = document.createElement("a");
a.href = linkUrl || "#";
a.target="_blank";
div.appendChild(a);

var img = document.createElement("img");
img.src = imgSrc;
a.appendChild(img);
return div;
}

/**
* 轮播图div数组
* @type {*[]}
*/
var carouselImagesArray = [
createImageContainer("images/1.jpg", "http://ucai.cn"),
createImageContainer("images/2.jpg", "http://baidu.com"),
createImageContainer("images/3.jpg")
];
var currentVisibleImage;

/**
* 呈现下一张图片
*/
function showNextCarouselImage() {
if (!switchImageAnimationPlaying) {
switchImageAnimationPlaying = true;
imageIndex++;
if (imageIndex >= carouselImagesArray.length) {
imageIndex = 0;
}

if (currentVisibleImage) {
moveTo(currentVisibleImage, 0, -800, 0, 0, 500, function (target) {
carouselContent.removeChild(target);
});
}

currentVisibleImage = carouselImagesArray[imageIndex];
carouselContent.appendChild(currentVisibleImage);
currentVisibleImage.style.left = "800px";
moveTo(currentVisibleImage, 800, 0, 0, 0, 500, function () {
switchImageAnimationPlaying = false;
});
}
}

/**
* 呈现上一张图片
*/
function showPreCarouselImage() {
if (!switchImageAnimationPlaying) {
switchImageAnimationPlaying = true;
imageIndex--;

if (imageIndex < 0) {
imageIndex = carouselImagesArray.length - 1;
}

if (currentVisibleImage) {
moveTo(currentVisibleImage, 0, 800, 0, 0, 500, function (target) {
carouselContent.removeChild(target);
});
}

currentVisibleImage = carouselImagesArray[imageIndex];
carouselContent.appendChild(currentVisibleImage);
currentVisibleImage.style.left = "-800px";
moveTo(currentVisibleImage, -800, 0, 0, 0, 500, function () {
switchImageAnimationPlaying = false;
});
}
}

function addInitCarouselImage() {
imageIndex = 0;
currentVisibleImage = carouselImagesArray[imageIndex];
carouselContent.appendChild(currentVisibleImage);
}

/**
* 为左右按钮添加事件侦听器
*/
function addListeners() {
document.querySelector("#carousel .btn-pre").onclick = function () {
showPreCarouselImage();
restartSwitchImageTimer();
};

document.querySelector("#carousel .btn-next").onclick = function () {
showNextCarouselImage();
restartSwitchImageTimer();
};
}

/**
* 重新开始用于切换图片的计时器
*/
function restartSwitchImageTimer() {
if (switchImageTimerId != -1) {
clearInterval(switchImageTimerId);
}

switchImageTimerId = setInterval(function () {
showNextCarouselImage();
// showPreCarouselImage();
}, 5000);
}

function init() {

addListeners();

addInitCarouselImage();
restartSwitchImageTimer();
}

init();
})();