版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u010011236/article/details/85252777
一、目标
1.实现图片自动轮播
2.图片自动轮播时下面的小图片上有进度条显示
3.点击下面的小图片时会播放相应的大图片
二、相关知识点
CSS相关知识点：
1. 定位
2. 浮动
三、分解目标
3.1、实现静态页面布局
首先实现静态的页面布局，即图片静止时的网页显示效果。网页的框架布局图如图1所示。
图1
图片轮播区域和缩略图区域都被包含在一个大的盒子中，具体的html代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网易天谕轮播图</title>
<link rel="stylesheet" href="lunbo0.css">
</head>
<body>
<div id="container">
<div id="imgwrap" style="left:0;">
<img src="img/banner_00.jpg" alt="">
<img src="img/banner_01.jpg" alt="">
<img src="img/banner_02.jpg" alt="">
<img src="img/banner_03.jpg" alt="">
<img src="img/banner_04.jpg" alt="">
<img src="img/banner_05.jpg" alt="">
</div>
<div id="navswrap">
<!--第一幅缩略图和进度条-->
<div class="nav nav0" data-index="0">
<!--缩略图-->
<div class="navpic"></div>
<!--进度条-->
<div class="prowrap">
<div class="pro"></div>
</div>
</div>
<!--第二幅缩略图和进度条-->
<div class="nav nav1" data-index="1">
<!--缩略图-->
<div class="navpic"></div>
<!--进度条-->
<div class="prowrap">
<div class="pro"></div>
</div>
</div>
<div class="nav nav2" data-index="2">
<!--缩略图-->
<div class="navpic"></div>
<!--进度条-->
<div class="prowrap">
<div class="pro"></div>
</div>
</div>
<div class="nav nav3" data-index="3">
<!--缩略图-->
<div class="navpic"></div>
<!--进度条-->
<div class="prowrap">
<div class="pro"></div>
</div>
</div>
<div class="nav nav4" data-index="4">
<!--缩略图-->
<div class="navpic"></div>
<!--进度条-->
<div class="prowrap">
<div class="pro"></div>
</div>
</div>
<div class="nav nav5" data-index="5">
<!--缩略图-->
<div class="navpic"></div>
<!--进度条-->
<div class="prowrap">
<div class="pro"></div>
</div>
</div>
</div>
</div>
</body>
</html>
静态页面的CSS样式如下所示：
* {margin: 0; padding: 0;}
/*最大的div的样式*/
#container {
margin: 20px auto;
width: 1224px;
height: 630px;
position: relative;
overflow: hidden;
}
/*轮播图片样式*/
#imgwrap {
width: 7344px;
height: 500px;
position: absolute;
}
#imgwrap > img {float: left;}
/*缩略图样式*/
#navswrap {
position: absolute;
width: 1224px;
height: 167px;
bottom: 0;
left: 0;
cursor: pointer;
}
.nav {
width: 204px;
height: 167px;
float: left;
}
.navpic {
width: 204px;
height: 162px;
background-position: right center;
}
.nav0 > .navpic {background-image: url("img/sbanner_00.png");}
.nav1 > .navpic {background-image: url("img/sbanner_01.png");}
.nav2 > .navpic {background-image: url("img/sbanner_02.png");}
.nav3 > .navpic {background-image: url("img/sbanner_03.png");}
.nav4 > .navpic {background-image: url("img/sbanner_04.png");}
.nav5 > .navpic {background-image: url("img/sbanner_05.png");}
/*进度条*/
.nav .prowrap {
width: 204px;
height: 5px;
}
/*静态进度条样式*/
.nav0 >.prowrap { background: #7b5596;}
.nav1 >.prowrap { background: #83a2cc;}
.nav2 >.prowrap { background: #e18140;}
.nav3 >.prowrap { background: #47acab;}
.nav4 >.prowrap { background: #c86c8c;}
.nav5 >.prowrap { background: #9089d0;}
/*动态进度条样式*/
.pro {width: 0; height: 5px;}
.nav0 >.prowrap > .pro { background: #49047a;}
.nav1 >.prowrap > .pro { background: #13478f;}
.nav2 >.prowrap > .pro { background: #b94e00;}
.nav3 >.prowrap > .pro { background: #00605f;}
.nav4 >.prowrap > .pro { background: #a41a4a;}
.nav5 >.prowrap > .pro { background: #4a4191;}
3.2、图片自动轮播
静态页面的html和css样式已经实现，然后首先实现图片的自动轮播功能，具体的js代码如下所示：
window.onload = function() {
var imgwrap = document.getElementById('imgwrap');
var images = document.getElementsByTagName('img');
var imagesLen = images.length;
var index = 0;
function next_pic() {
index++;
index = index % imagesLen;
imgwrap.style.left = -index*1224 + 'px';
}
setInterval(next_pic, 1000);
};
图片播放到下一张就增加图片的索引 index，然后再对总的图片数量进行求余运算，如此得到的索引即为当前图片的索引。不用再对索引 index 进行判断。
3.3、进度条
上面我们已经实现了图片的自动轮播，这一步将实现进度条，具体的js代码如下所示：
var pros = document.getElementsByClassName('pro');
function progressBar() {
var newWidth;
if (getStyle(pros[index], 'width') === '204px') {
clearBar();
next_pic();
newWidth = 0;
pros[index].style.width = newWidth + 'px';
} else {
newWidth = parseInt(getStyle(pros[index], 'width')) + 2;
pros[index].style.width = newWidth + 'px';
}
}
// 清除上一张图的进度条
function clearBar() {
pros[index].style.width = 0;
}
// 获取CSS样式属性值
function getStyle(elem, cssname) {
if (window.getComputedStyle) {
return window.getComputedStyle(elem)[cssname];
} else {
// IE6
return elem.currentStyle[cssname];
}
}
当播放到下一张图片时，自动清除上一张图的进度条样式。
3.4、点击缩略图播放大图
这一步将要实现：当点击缩略图时显示大图，同时清除之前的精度条样式，并播放当前进度条。具体js代码如下所示：
// 点击事件
var navs = document.getElementsByClassName('nav');
for (var i = 0; i < navs.length; i++) {
navs[i].onclick = function() {
clearBar();
index = this.dataset.index;
imgwrap.style.left = -index*1224 + 'px';
}
}
3.5、完整的js代码
完整的js代码如下所示：
window.onload = function() {
var imgwrap = document.getElementById('imgwrap');
var images = document.getElementsByTagName('img');
var imagesLen = images.length;
var index = 0;
// 点击事件
var navs = document.getElementsByClassName('nav');
for (var i = 0; i < navs.length; i++) {
navs[i].onclick = function() {
clearBar();
clearInterval(timer);
index = this.dataset.index;
imgwrap.style.left = -index*1224 + 'px';
autoPlay();
}
}
var timer = null;
function autoPlay() {
timer = setInterval(progressBar, 20);
}
autoPlay();
// 播放下一张
function next_pic() {
index++;
index = index % imagesLen;
imgwrap.style.left = -index*1224 + 'px';
}
// 进度条
var pros = document.getElementsByClassName('pro');
function progressBar() {
var newWidth;
if (getStyle(pros[index], 'width') === '204px') {
clearBar();
next_pic();
newWidth = 0;
pros[index].style.width = newWidth + 'px';
} else {
newWidth = parseInt(getStyle(pros[index], 'width')) + 2;
pros[index].style.width = newWidth + 'px';
}
}
// 清除上一张图的进度条
function clearBar() {
pros[index].style.width = 0;
}
// 获取CSS样式属性值
function getStyle(elem, cssname) {
if (window.getComputedStyle) {
return window.getComputedStyle(elem)[cssname];
} else {
// IE6
return elem.currentStyle[cssname];
}
}
};
代码完整地址github