jQuery之轮播图
轮播图（原生）
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图（原生）</title> <style type="text/css"> /*去除内边距,没有链接下划线*/ * { margin: 0; padding: 0; text-decoration: none; } /*让<body有20px的内边距*/ body { padding: 20px; } /*最外围的div*/ #container { width: 600px; height: 400px; overflow: hidden; position: relative; /*相对定位*/ margin: 0 auto; } /*包含所有图片的<div>*/ #list { width: 4200px; /*7张图片的宽*/ height: 400px; position: absolute; /*绝对定位*/ z-index: 1; /*???*/ } /*所有的图片<img>*/ #list img { float: left; /*浮在左侧*/ } /*包含所有圆点按钮的<div>*/ #buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px; } /*所有的圆点<span>*/ #buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px; } /*第一个<span>*/ #buttons .on { background: orangered; } /*切换图标<a>*/ .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, 0.3); color: #fff; } /*鼠标移到切换图标上时*/ .arrow:hover { background-color: RGBA(0, 0, 0, 0.7); } /*鼠标移到整个div区域时*/ #container:hover .arrow { display: block; /*显示*/ } /*上一个切换图标的左外边距*/ #prev { left: 20px; } /*下一个切换图标的右外边距*/ #next { right: 20px; } </style> </head> <body> <div id="container"> <div id="list" style="left: -600px;"> <img src="img/5.jpg" alt="1"/> <img src="img/1.jpg" alt="1"/> <img src="img/2.jpg" alt="2"/> <img src="img/3.jpg" alt="3"/> <img src="img/4.jpg" alt="4"/> <img src="img/5.jpg" alt="5"/> <img src="img/1.jpg" alt="5"/> </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> <a href="javascript:;" id="prev" class="arrow"><</a> <a href="javascript:;" id="next" class="arrow">></a> </div> <script type="text/javascript"> /* * 功能说明： * 1.点击向右(左)的图标，平滑切换到下(上)一页 * 2.无限循环切换：第一页的上一页为最后页，最后一页的下一页是第一页 * 3.每隔3s自动滑动到下一页 * 4.当鼠标进入图片区域时，自动切换停止，当鼠标离开后，又开始自动切换 * 5.切换页面时，下面的圆点也同步更新 * 6.点击圆点图标切换到对应的页 */ /** * 根据id得到对应的标签对象 * @param {Object} id */ function $(id) { return document.getElementById(id); } /** * 给指定id对应的元素绑定点击监听 * @param {Object} id * @param {Object} callback */ function click(id, callback) { $(id).onclick = callback; } window.onload = function () { var listDiv = $("list"); var totalTime = 400;//换页的总时间 var intervalTime = 20;//移动的间隔时间 var intervalId;//循环定时器的id(翻页中的不移动) var imgCount = 5; //图片的个数 var moveing = false; //是否正在移动中 var index = 0;//当前显示图片的下标(从0开始到imgCount-1) var buttonSpans = $("buttons").children; //所有标识圆点标签的集合 var containerDiv = $("container"); var intervalId2; //循环定时器的id(自动翻页) //给下一页绑定点击监听 click("next", function () { //切换到下一页 nextPage(true); }); //给上一页绑定点击监听 click("prev", function () { //切换到上一页 nextPage(false); }); //给所有的提示圆点绑定点击监听 clickButtons(); //启动定时自动翻页 autoNextPage(); //给容器div绑定鼠标移入的监听: 停止自动翻页 containerDiv.onmouseover = function () { clearInterval(intervalId2); } //给容器div绑定鼠标移出的监听: 启动自动翻页 containerDiv.onmouseout = function () { autoNextPage(); }; /** * 启动定时自动翻页 */ function autoNextPage() { intervalId2 = setInterval(function () { nextPage(true); }, 3000); } /** * 切换到下一页/上一页 * true 下 * false 上 * index 目标页 * @param {Object} next true */ function nextPage(next) { //如果正在移动, 直接结束 if (moveing) { return; } //标识正在移动 moveing = true; //需要进行的总偏移量 var offset; if (typeof next === 'boolean') { offset = next ? -600 : 600; } else { offset = -600 * (next - index); } //var offset = next ? -600 : 600; //每个小移动需要做的偏移量 var itemOffset = offset / (totalTime / intervalTime); //切换完成时div的left的坐标 var targetLeft = listDiv.offsetLeft + offset; //循环定时器 intervalId = setInterval(function () { //var currentLeft = listDiv.offsetLeft; //得到当前这次偏移的样式left坐标 var left = listDiv.offsetLeft + itemOffset; //如果已经到达目标位置 if (left == targetLeft) { //移除定时器 clearInterval(intervalId); //如果当前到达的是最左边的图片，跳转到右边第二张图片的位置 if (left == 0) { left = -imgCount * 600; } else if (left == -600 * (imgCount + 1)) {//如果当前到达的是最右边的图片，跳转到左边第二张图片的位置 left = -600; } //标识没有移动了 moveing = false; } //指定div新的left坐标 listDiv.style.left = left + "px"; }, intervalTime); //更新标识圆点 updateButtons(next); } /** * 更新标识圆点 * @param {Object} next */ function updateButtons(next) { //将当前的圆点更新为一般圆点 buttonSpans[index].removeAttribute("class"); //计算出目标圆点的下标 var targetIndex; if (typeof next == 'boolean') { if (next) { targetIndex = index + 1; if (targetIndex == imgCount) { targetIndex = 0; } } else { targetIndex = index - 1; if (targetIndex == -1) { targetIndex = imgCount - 1; } } } else { targetIndex = next; } //将标圆点的下标更新为当前下标 index = targetIndex; //将目标圆点设置为当前圆点 buttonSpans[index].className = 'on'; } /** * 给所有的圆点设置点击监听 */ function clickButtons() { for (var i = 0, length = buttonSpans.length; i < length; i++) { buttonSpans[i].index = i; buttonSpans[i].onclick = function () { nextPage(this.index); }; /* (function (index) { buttonSpans[index].onclick = function () { nextPage(index); }; })(i); */ } } }; </script> </body> </html>
轮播图（jQuery）
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图（jQuery）</title> <style type="text/css"> /*去除内边距,没有链接下划线*/ * { margin: 0; padding: 0; text-decoration: none; } /*让<body有20px的内边距*/ body { padding: 20px; } /*最外围的div*/ #container { width: 600px; height: 400px; overflow: hidden; position: relative; /*相对定位*/ margin: 0 auto; } /*包含所有图片的<div>*/ #list { width: 4200px; /*7张图片的宽: 7*600 */ height: 400px; position: absolute; /*绝对定位*/ z-index: 1; } /*所有的图片<img>*/ #list img { float: left; /*浮在左侧*/ } /*包含所有圆点按钮的<div>*/ #pointsDiv { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px; } /*所有的圆点<span>*/ #pointsDiv span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px; } /*第一个<span>*/ #pointsDiv .on { background: orangered; } /*切换图标<a>*/ .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, 0.3); color: #fff; } /*鼠标移到切换图标上时*/ .arrow:hover { background-color: RGBA(0, 0, 0, 0.7); } /*鼠标移到整个div区域时*/ #container:hover .arrow { display: block; /*显示*/ } /*上一个切换图标的左外边距*/ #prev { left: 20px; } /*下一个切换图标的右外边距*/ #next { right: 20px; } </style> </head> <body> <div id="container"> <div id="list" style="left: -600px;"> <img src="img/5.jpg" alt="5"/> <img src="img/1.jpg" alt="1"/> <img src="img/2.jpg" alt="2"/> <img src="img/3.jpg" alt="3"/> <img src="img/4.jpg" alt="4"/> <img src="img/5.jpg" alt="5"/> <img src="img/1.jpg" alt="1"/> </div> <div id="pointsDiv"> <span index="1" class="on"></span> <span index="2"></span> <span index="3"></span> <span index="4"></span> <span index="5"></span> </div> <a href="javascript:;" id="prev" class="arrow"><</a> <a href="javascript:;" id="next" class="arrow">></a> </div> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript"> /* * 功能说明： * 1.点击向右(左)的图标，平滑切换到下(上)一页 * 2.限循环切换：第一页的上一页为最后页，最后一页的下一页是第一页 * 3.每隔3s自动滑动到下一页 * 4.当鼠标进入图片区域时，自动切换停止，当鼠标离开后，又开始自动切换 * 5.切换页面时，下面的圆点也同步更新 * 6.点击圆点图标切换到对应的页 */ $(function () { var $container = $('#container'); var $list = $('#list'); var $points = $('#pointsDiv>span'); var $prev = $('#prev'); var $next = $('#next'); var TIME = 400; //移动的总时间 var ITEM_TIME = 20; //单元移动的间隔时间 var PAGE_WIDTH = 600; //一页的宽度 var imgCount = $points.length; //图片的数量 var index = 0; //当前圆点的下标 var moving = false; //是否正在翻页中 //1.点击向右(左)的图标，平滑切换到下(上)一页 $next.click(function () { nextPage(true); }); $prev.click(function () { nextPage(false); }); //3.每隔3s自动滑动到下一页 var intervalId = setInterval(function () { nextPage(true); }, 1000); //4.当鼠标进入图片区域时，自动切换停止，当鼠标离开后，又开始自动切换 $container.hover(function () { clearInterval(intervalId); }, function () { intervalId = setInterval(function () { nextPage(true); }, 1000); }); //6.点击圆点图标切换到对应的页 $points.click(function () { var targetIndex = $(this).index(); if(targetIndex!=index) { nextPage(targetIndex); } }); /** * 平滑翻页 * @param next * true：翻到下一页 * false：翻到上一页 * 数值：翻到指定页 */ function nextPage (next) { /* * 移动的总距离：offset=? * 移动的总时间：time=500ms * 单元移动的间隔时间：itemTime=20ms * 单元移动的距离：itemOffset = offset/(time/itemTime) * 启动循环定时器不断移动，到达目标位置时清除定时器 */ // 如果正在翻页，此次翻页请求不执行 if(moving) { return; } moving = true; //标识正在翻页中 var offset = 0; //移动的总距离 //计算offset if(typeof next==='boolean') { offset = next ? -PAGE_WIDTH : PAGE_WIDTH; } else { offset = -PAGE_WIDTH * (next - index); } //计算单元移动的距离 var itemOffset = offset/(TIME/ITEM_TIME); //当前的left var currLeft = $list.position().left; //目标的left var targetLeft = currLeft + offset; //启动循环定时器不断移动，到达目标位置时清除定时器 var intervalId = setInterval(function () { //计算当前要设置的left currLeft += itemOffset; if(currLeft===targetLeft) { //清除定时器 clearInterval(intervalId); //标识翻页完成 moving = false; //如果滑动到了最左边的图片，直接跳转到最右边的第2张图片 if(currLeft===0) { currLeft = -PAGE_WIDTH * imgCount; } else if(currLeft===-PAGE_WIDTH*(imgCount+1)) { //如果滑动到了最右边的图片，直接跳转到最左边的第2张图片 currLeft = -PAGE_WIDTH; } } //更新$list的left样式 $list.css({ left: currLeft }); }, ITEM_TIME); //5.切换页面时，下面的圆点也同步更新 updatePoints(next); } /** * 更新标识圆点 * @param next */ function updatePoints (next) { var targetIndex = 0; //计算目标下标 if(typeof next==='boolean') { if(next) { targetIndex = index + 1; if(targetIndex===imgCount) { targetIndex = 0; } } else { targetIndex = index-1; if(targetIndex===-1) { targetIndex = imgCount-1; } } } else { targetIndex = next; } //移除当前下标元素的class $points[index].className = ''; //给目标下标的元素指定class $points[targetIndex].className = 'on'; //更新当前下标 index = targetIndex; } }); </script> </body> </html>
