点击圆点翻页
实现nextPage传数值的应用：修改对应offset就行
upDatePoints里面更新
解决快速点击翻页的bug
nextPage修改moving初始值为0
一进nextPage就执行，并且变化moving为1
删除定时器的时候变化moving为0
最终代码jQuery
html&css
<!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张图片的宽: 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 src="./js/jquery.1.10.2.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
js
/*
功能说明:
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 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 //[0,imgCount-1]
if(targetIndex===imgCount) {//此时看到的是第1个圆点
targetIndex = 0
}
} else {
targetIndex = index-1
if(targetIndex===-1) {//此时看到的是第5个圆点
targetIndex = imgCount-1
}
}
} else {
targetIndex = next
}
// 移除当前下标元素的class
$points[index].className = ''
// 给目标下标的元素指定class
$points[targetIndex].className = 'on'
//更新当前下标
index = targetIndex
}
})
最终代码原生
<!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>