jQuery从入门到熟练(32)

(3) 轮播图
<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><div> <div 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> <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:;" class="arrow"><</a> <a href="javascript:;" class="arrow">></a></div><script type="text/javascript" src="jquery-1.10.1.js"></script><script> /* 功能说明: 1. 点击向右(左)的图标, 平滑切换到下(上)一页 2. 无限循环切换: 第一页的上一页为最后页, 最后一页的下一页是第一页 3. 每隔3s自动滑动到下一页 4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换 5. 切换页面时, 下面的圆点也同步更新 6. 点击圆点图标切换到对应的页 bug: 快速点击时, 翻页不正常 */$(function () { var $container = $("#container") var $list = $("#list") var $points = $("#pointsDiv>span") var $prev = $("#prev") var $next = $("#next") var PAGE_WIDTH = 600 //一页的宽度 var TIME = 400 // 翻页的持续时间 var ITEM_TIME = 20 // 单元移动的间隔时间 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) { /* 总的时间: TIME=400 单元移动的间隔时间: ITEM_TIME = 20 总的偏移量: offset 单元移动的偏移量: itemOffset = offset/(TIME/ITEM_TIME) 启动循环定时器不断更新$list的left, 到达目标处停止停止定时器 */ //如果正在翻页, 直接结束 if(moving) { //已经正在翻页中 return } moving = true // 标识正在翻页 // 总的偏移量: offset var offset = 0 // 计算offset if(typeof next==="boolean") { offset = next ? -PAGE_WIDTH : PAGE_WIDTH } else { offset = -(next-index)* PAGE_WIDTH } // 计算单元移动的偏移量: itemOffset var itemOffset = offset/(TIME/ITEM_TIME) // 得到当前的left值 var currLeft = $list.position().left // 计算出目标处的left值 var targetLeft = currLeft offset // 启动循环定时器不断更新$list的left, 到达目标处停止停止定时器 var intervalId = setInterval(function () { // 计算出最新的currLeft currLeft = itemOffset if(currLeft===targetLeft) { // 到达目标位置 // 清除定时器 clearInterval(intervalId) // 标识翻页停止 moving = false // 如果到达了最右边的图片(1.jpg), 跳转到最左边的第2张图片(1.jpg) if(currLeft===-(imgCount 1) * PAGE_WIDTH) { currLeft = -PAGE_WIDTH } else if(currLeft===0){ // 如果到达了最左边的图片(5.jpg), 跳转到最右边的第2张图片(5.jpg) currLeft = -imgCount * PAGE_WIDTH } } // 设置left $list.css("left", currLeft) }, ITEM_TIME) // 更新圆点 updatePoints(next) } /** * 更新圆点 * @param next */ function updatePoints (next) { // 计算出目标圆点的下标targetIndex var targetIndex = 0 if(typeof next === "boolean") { if(next) { targetIndex = index 1 // [0, imgCount-1] if(targetIndex===imgCount) {// 此时看到的是1.jpg-->第1个圆点 targetIndex = 0 } } else { targetIndex = index - 1 if(targetIndex===-1) { // 此时看到的是5.jpg-->第5个圆点 targetIndex = imgCount-1 } } } else { targetIndex = next } // 将当前index的<span>的class移除 // $points.eq(index).removeClass("on") $points[index].className = "" // 给目标圆点添加class="on" // $points.eq(targetIndex).addClass("on") $points[targetIndex].className = "on" // 将index更新为targetIndex index = targetIndex }})</script>