1.创建两个文件夹 img(放图片)和js(放代码)：
img下的图片如下(按从上到下的顺序排)：
1.jpg
2.jpg
3.jpg
4.jpg
5.jpg
js下的代码如下：
<!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>
代码输出结果如下：
88.png
网友评论