js实现轮播图
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="style.css" rel="stylesheet"> </head> <body> <div> <div id="carousel-container"> <div id="carousel"> <div class="carousel-content"> </div> <div class="carousel-button btn-pre"><</div> <div class="carousel-button btn-next">></div> </div> </div> </div> <script src="main.js"></script> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
#carousel-container { position: relative; left: 50%; width: 0; } #carousel { width: 800px; height: 600px; position: relative; left: -400px; overflow: hidden; } #carousel .carousel-button { position: absolute; height: 60px; width: 40px; top: 30%; line-height: 60px; color: white; text-align: center; background: rgba(0, 0, 0, 0.3); font-size: 24px; } #carousel .carousel-button:hover { background: rgba(0, 0, 0, 0.8); } #carousel .btn-pre { left: 0; } #carousel .btn-next { right: 0; } #carousel .carousel-content { width: 3000px; height: 2000px; position: relative; } #carousel .image-container { position: absolute; }
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/** * 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(); })();
myGitgub https://github.com/mfx55
希望我的博客能帮到你