今天我们就来做一个轮播图效果，首先我说一下轮播图的原理，轮播图就是一组图片利用视觉差达到图片切换的效果。
1、我们使用html和css构建一下页面布局，最后效果如下
image.png
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html carousel</title>
<!-- 引入css文件 -->
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>
<div class="container">
<!-- 图片列表 -->
<div id="list" style="left: -800px;">
<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="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>
<!-- 引入js文件 -->
<script type="text/javascript" src="index.js"></script>
</body>
</html>
css代码
* {
margin: 0;
padding: 0;
text-decoration: none;
}
/* 整体盒子 */
.container {
width: 800px;
height: 400px;
position: relative;
overflow: hidden;
margin: 0 auto;
}
/* 图片集合 */
#list {
width: 5600px;
height: 400px;
position: absolute;
z-index: 1;
}
#list img {
float: left;
width: 800px;
height: 400px;
}
/* 圆点集合 */
#buttons {
position: absolute;
bottom: 20px;
left: 10px;
width: 100px;
height: 10px;
z-index: 2;
}
#buttons span {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid #fff;
background-color: #333;
cursor: pointer;
}
#buttons .on {
background-color: #FF4500;
}
.arrow {
display: none;
width: 40px;
height: 40px;
line-height: 35px;
position: absolute;
top: 180px;
z-index: 2;
font-size: 36px;
font-weight: bold;
color: #fff;
text-align: center;
background-color: rgba(0, 0, 0, .3);
cursor: pointer;
}
.arrow:hover {
background-color: rgba(0, 0, 0, .7)
}
.container:hover .arrow {
display: block;
}
#prev {
left: 10px;
}
#next {
right: 10px;
}
到这里，页面的布局也已经全部完成了。接下来，我们使用js完成页面切换图片的效果
2、使用js利用图片偏移，达到切换图片的效果
javascript
window.onload = function() {
var container = document.getElementsByClassName('container')[0];
var list = document.getElementById('list');
var buttons = document.getElementById('buttons').getElementsByTagName('span');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var index = 1;
var animated = false;
var timer;
play();
// 自动播放
function play() {
timer = setInterval(function() {
next.onclick();
}, 3000);
}
// 停止自动播放
function stop() {
clearInterval(timer);
}
container.onmouseover = stop;
container.onmouseout = play;
// 移动
function animate(offset) {
animated = true;
var newLeft = parseInt(list.style.left) + offset;
var time = 300; // 位移总时间
var interval = 10; // 位移间隔时间
var spend = offset / (time / interval); // 每次位移量
function go() {
if((spend < 0 && parseInt(list.style.left) > newLeft) || (spend > 0 && parseInt(list.style.left) < newLeft)) {
list.style.left = parseInt(list.style.left) + spend + 'px';
setTimeout(go, interval);
} else {
animated = false;
list.style.left = newLeft + 'px';
if(newLeft > -800) {
list.style.left = -4000 + 'px';
}
if(newLeft < -4000) {
list.style.left = -800 + 'px';
}
}
}
go();
}
// 点击向右的按钮
next.onclick = function() {
if(index == 5) {
index = 1;
} else {
index += 1;
}
showButton();
if(!animated) {
animate(-800);
}
}
// 点击向左的按钮
prev.onclick = function() {
if(index == 1) {
index = 5;
} else {
index -= 1;
}
showButton();
if(!animated) {
animate(800);
}
}
// 显示小圆点
function showButton() {
for(var i = 0; i < buttons.length; i++) {
if(buttons[i].className == 'on') {
buttons[i].className = '';
break;
}
}
buttons[index - 1].className = 'on';
}
// 点击小圆点时，切换图片
for(var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function() {
var myIndex = parseInt(this.getAttribute('index'));
// console.log(myIndex);
var offset = -800 * (myIndex - index);
index = myIndex;
showButton();
if(!animated) {
animate(offset);
}
}
}
}
网友评论