## web前端必学功法之一：轮播图
效果演示:
```css
<style>
* {
margin: 0;
padding: 0;
}
/* 去除a标签的下划线 */
a {
text-decoration: none;
}
.container {
position: relative;
width: 600px;
height: 400px;
margin: 100px auto 0 auto;
box-shadow: 0 0 5px mediumpurple;
overflow: hidden;
}
.wrap {
position: absolute;
width: 4200px;
height: 400px;
z-index: 1;
}
.container .wrap img {
float: left;
width: 600px;
height: 400px;
}
.container .buttons {
position: absolute;
right: 150px;
bottom: 20px;
width: 200px;
height: 10px;
z-index: 2;
}
.container .buttons span {
margin-left: 5px;
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 50px;
background-color: mediumslateblue;
color: white;
cursor: pointer;
text-align: center;
}
.container .buttons span.on {
background-color: red;
}
.container .arrow {
position: absolute;
top: 36%;
color: mediumpurple;
padding: 0 12px;
border-radius: 50%;
font-size: 50px;
z-index: 2;
}
.container .arrow_left {
left: 10px;
}
.container .arrow_right {
right: 10px;
}
.container .arrow:hover {
background-color: rgba(0, 0, 0, 0.3);
}
</style>
```
```html
<div class="container">
<!-- 图片区域 -->
<div class="wrap" style="left:-600px;">
<img src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
<img src="img/4.jpg" />
<img src="img/5.jpg" />
<img src="img/6.jpg" />
<img src="img/7.jpg" />
</div>
<!-- 圆点 -->
<div class="buttons">
<span id="1">1</span>
<span id="2">2</span>
<span id="3">3</span>
<span id="4">4</span>
<span id="5">5</span>
</div>
<!-- 左右控制按钮 -->
<a href="javascript:void(0)" class="arrow arrow_left" onclick="preImg()"><</a>
<a href="javascript:void(0)" class="arrow arrow_right" onclick="nextImg()">></a>
</div>
```
```javascript
<script>
var wrap = document.querySelector(".wrap");
var newLeft;
// 上一张
function preImg() {
// 判断当前图片是否为最后一张
if (wrap.style.left === "-3600px") {
newLeft = -1200; //是为最后一张就回到最前面一张
} else {
newLeft = parseInt(wrap.style.left) - 600 //不是就到上一张,因为当前wrap.style.left值是个字符串，所以就需要parseInt()
}
wrap.style.left = newLeft + "px"; // 新位置的值
index--; //上一张，每次图标就减去1
if(index < 0){ //index最小为0
index = 4;
}
showCurrentDot();
}
// 下一张
function nextImg() {
// 判断当前图片是否为最后一张
if (wrap.style.left === "0px") {
newLeft = -2400; //是为最后一张，就回到第一张
} else {
newLeft = parseInt(wrap.style.left) + 600 //不是第一张就继续下一张,因为当前wrap.style.left值是个字符串，所以就需要parseInt()
}
wrap.style.left = newLeft + "px"; // 新位置的值
index++; //下一张，每次图标就加1
if(index > 4){ //index大于4 ，说明到了最后一张
index = 0;
}
showCurrentDot();
}
// 自动播放
var timer;
function autoPlay(){
//定时两秒执行一次，下一章 方法调用
timer = setInterval(function(){
nextImg();
},2000)
}
autoPlay();
// 鼠标悬停时，停止图片轮播
// 找到当前容器，绑定一个onmouserover
document.querySelector(".container").onmouseover = function(){
//清除定时任务
clearInterval(timer);
}
//鼠标离开时，开始轮播图片
document.querySelector(".container").onmouseleave = function(){
//自动播放
autoPlay();
}
//显示小圆点
var index = 0;
var dots = document.getElementsByTagName("span"); //获取所有的小圆点
function showCurrentDot(){
for(var i = 0; i < dots.length; i++){
//设置圆点不选中
dots[i].className = "";
}
//将当前所在位置的图片对应的小圆点选中
dots[index].className = "on";
}
showCurrentDot();
//点击小圆点事件
for(var i = 0; i< dots.length; i++){
//绑定点击事件
dots[i].onclick = function(){
//获取点击的圆点的位置(id属性值)
var dis = this.id;
//设置wrap的left值
wrap.style.left = -(dis * 600) + "px";
//设置红点位置
index = dis - 1; //dis是从1开始的，但是索引是从0开始的，所以要减少1
showCurrentDot();
}
}
</script>
```
## 轮播图总结
1.这里使用5个小圆点，用7张图片来轮播，是为了实现无缝轮播，这样看起来效果比较好一点
2.它的原理：就是将图片在一行中进行平铺，把所有的图片平铺在页面中，然后进行计算偏移量，再利用定时器，定时轮播
3.布局很重要。是成功的第一步。
