代码如下:
1. index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动效果图</title>
<script type="text/javascript" src="js/banner.js"></script>
<style type="text/css">
#banner {
width: 790px;
height: 340px;
margin: auto;
overflow: hidden;
}
</style>
<script type="text/javascript">
window.onload = function () {
//滚动的图片数组,数组存储的是图片的路径
var imgs = [];
imgs[0] = "img/banner1.jpg";
imgs[1] = "img/banner2.jpg";
imgs[2] = "img/banner3.jpg";
imgs[3] = "img/banner4.jpg";
imgs[4] = "img/banner5.jpg";
// 调用方法,第一个参数为滚动块的容器ID,第二个为图片数组,第三个为滚动方式
banner("banner", imgs, "opacity");
// banner("banner", imgs, "top");
// banner("banner", imgs, "bottom");
// banner("banner", imgs, "left");
// banner("banner", imgs, "right");
}
</script>
</head>
<body>
<div id="banner"></div>
</body>
</html>
2.banner.js
var container;//整体容器
var indicator;//滚动条容器
var lastIndex = 0;//上一次图片位置
var currentIndex = 0;//当前图片位置
var types;//滚动方式 left,right,bottom,top,opacity
var interval;//得到计时器引用
function banner(containerId, imgs, type) {
window.types = type;
container = document.getElementById(containerId);
container.style.position = "relative";
var clientWidth = container.clientWidth;
var clientHeight = container.clientHeight;
//当鼠标放在大容器的时显示左右两边的按钮,移出时隐藏
container.addEventListener("mouseover", containerMouseover);
container.addEventListener("mouseout", containerMouseout);
//加载图片到div中(每一张图片创建一个块)
for (var i = 0; i < imgs.length; i++) {
var div = document.createElement("div");
div.style.width = clientWidth + "px";
div.style.height = clientHeight + "px";
div.style.backgroundImage = "url('" + imgs[i] + "')";
div.style.backgroundRepeat = "no-repeat";
div.style.position = "absolute";
if (i !== 0) {
div.style.display = "none";
}
container.appendChild(div);
}
//创建滚动条容器
indicator = document.createElement("div");
indicator.style.width = "180px";
indicator.style.height = "30px";
indicator.style.backgroundColor = "rgba(14,26,52,0.25)";
indicator.style.borderRadius = "15px"
indicator.style.position = "absolute";
indicator.style.left = "310px";
indicator.style.bottom = "30px";
indicator.style.paddingLeft = "6px";
indicator.style.paddingRight = "6px";
//添加小点
for (var i = 0; i < imgs.length; i++) {
var pointer = document.createElement("div");
// 为每个点添加鼠标移上去和移出事件
pointer.id = i;
pointer.addEventListener("mouseover", mouseoverPointer);
pointer.addEventListener("mouseout", mouseoutPointer);
pointer.style.display = "inline-block";
pointer.style.width = "20px";
pointer.style.height = "20px";
pointer.style.borderRadius = "10px";
pointer.style.margin = "5px";
pointer.style.marginLeft = "10px";
if (i == 0) {
pointer.style.backgroundColor = "red";
} else {
pointer.style.backgroundColor = "#fff";
}
indicator.appendChild(pointer);
}
container.appendChild(indicator);
//创建存放箭头的容器
var leftRightButtonContainer = document.createElement("div");
leftRightButtonContainer.style.width = clientWidth + "px";
leftRightButtonContainer.style.height = "50px";
leftRightButtonContainer.style.position = "absolute";
leftRightButtonContainer.style.top = "150px";
leftRightButtonContainer.style.fontSize = "30px";
leftRightButtonContainer.style.display = "none";
//创建左右两个箭头
var leftButton = document.createElement("div");
leftButton.style.width = "25px";
leftButton.style.height = "50px";
leftButton.style.backgroundColor = "rgba(43,43,43,0.8)";
leftButton.style.position = "absolute";
leftButton.style.fontSize = "30px";
leftButton.style.color = "#fff";
leftButton.innerHTML = "<";
var rightButton = document.createElement("div");
rightButton.style.width = "25px";
rightButton.style.height = "50px";
rightButton.style.position = "absolute";
rightButton.style.backgroundColor = "rgba(43,43,43,0.8)";
rightButton.style.right = "0px";
rightButton.style.fontSize = "30px";
rightButton.style.color = "#fff";
rightButton.innerHTML = ">";
// 为左右按钮添加移上去和移出事件,和点击事件
leftButton.addEventListener("mouseover", leftMouseover);
rightButton.addEventListener("mouseover", rightMouseover);
leftButton.addEventListener("click", leftClick);
rightButton.addEventListener("click", rightClick);
leftRightButtonContainer.appendChild(leftButton);
leftRightButtonContainer.appendChild(rightButton);
container.appendChild(leftRightButtonContainer);
// 图片每隔4秒切换一张
interval = setInterval(function () {
currentIndex = (currentIndex + 1) % (container.children.length - 2);
changeImage();
}, 4000);
}
// 根据不同的滚动形式选择不同的滚动方法
function changeImage() {
var forward = container.children[lastIndex];
var back = container.children[currentIndex];
//调用选中小点的方法,切换一张图片对应的小点选中
changeIndicator(currentIndex);
switch (types) {
case "left":
srollLeft(forward, back);
break;
case "right":
srollRight(forward, back);
break;
case "top":
srollTop(forward, back);
break;
case "bottom":
srollBottom(forward, back);
break;
case "opacity":
srollOpacity(forward, back);
break;
default:
srollOpacity(forward, back);
break;
}
lastIndex = currentIndex;
}
//鼠标移动到左边的箭头
function leftMouseover(event) {
var target = event.target;
target.style.cursor = "pointer";
}
//鼠标移动到右边的箭头
function rightMouseover(event) {
var target = event.target;
target.style.cursor = "pointer";
}
//点击左侧按钮
function leftClick() {
currentIndex = (currentIndex - 1) % (container.children.length - 2);
if (currentIndex == -1) {
currentIndex = container.children.length - 3;
}
changeImage();
}
//点击右侧按钮
function rightClick() {
currentIndex = (currentIndex + 1) % (container.children.length - 2);
changeImage();
}
// 鼠标移上去小点上面
function mouseoverPointer(event) {
clearInterval(interval);
var target = event.target;
if (target.id != currentIndex) {
currentIndex = target.id;
changeImage();
}
}
// 鼠标移出小点
function mouseoutPointer() {
interval = setInterval(function () {
currentIndex = (currentIndex + 1) % (container.children.length - 2);
changeImage();
}, 4000);
}
//鼠标移上去大容器上面
function containerMouseover() {
container.lastElementChild.style.display = "block";
}
//鼠标移开大容器
function containerMouseout() {
container.lastElementChild.style.display = "none";
}
//渐变
function srollOpacity(forward, back) {
back.style.display = "block";
back.style.opacity = 0;
forward.style.display = "block";
forward.style.opacity = 1;
var op = 1;
var intervalClear = setInterval(function () {
op -= 0.05;
//改变透明度
back.style.opacity = 1 - op;
forward.style.opacity = op;
if (op <= 0) {
window.clearInterval(intervalClear);
forward.style.display = "none";
}
}, 10);
}
//向上滚动
function srollTop(forward, back) {
back.style.display = "block";
back.style.top = back.clientHeight + "px";
forward.style.display = "block";
forward.style.top = 0;
forward.style.opacity = 1;
back.style.opacity = 0;
var i = back.clientHeight;
var intervalClear = setInterval(function () {
i -= 10;
back.style.top = i + "px";
//改变透明度
forward.style.opacity = i / back.clientHeight;
back.style.opacity = 1 - i / back.clientHeight;
forward.style.top = (i - back.clientHeight) / 2 + "px";
if (i <= 0) {
window.clearInterval(intervalClear);
forward.style.display = "none";
}
}, 4);
}
//向下滚动
function srollBottom(forward, back) {
back.style.display = "block";
back.style.top = -back.clientHeight + "px";
forward.style.display = "block";
forward.style.top = 0;
forward.style.opacity = 1;
back.style.opacity = 0;
var i = back.clientHeight;
var intervalClear = setInterval(function () {
i -= 10;
back.style.top = -i + "px";
//改变透明度
forward.style.opacity = i / back.clientHeight;
back.style.opacity = 1 - i / back.clientHeight;
forward.style.top = (back.clientHeight - i ) / 2 + "px";
if (i <= 0) {
window.clearInterval(intervalClear);
forward.style.display = "none";
}
}, 4);
}
//向左滚动
function srollLeft(forward, back) {
back.style.display = "block";
back.style.left = back.clientWidth + "px";
forward.style.display = "block";
forward.style.left = 0;
forward.style.opacity = 1;
back.style.opacity = 0;
var i = back.clientWidth;
var intervalClear = setInterval(function () {
i -= 10;
back.style.left = i + "px";
//改变透明度
forward.style.opacity = i / back.clientWidth;
back.style.opacity = 1 - i / back.clientWidth;
forward.style.left = (i - back.clientWidth) / 2 + "px";
if (i <= 0) {
window.clearInterval(intervalClear);
forward.style.display = "none";
}
}, 4);
}
//向右滚动
function srollRight(forward, back) {
back.style.display = "block";
back.style.left = -back.clientWidth + "px";
forward.style.display = "block";
forward.style.left = 0;
forward.style.opacity = 1;
back.style.opacity = 0;
var i = back.clientWidth;
var intervalClear = setInterval(function () {
i -= 10;
back.style.left = -i + "px";
//改变透明度
forward.style.opacity = i / back.clientWidth;
back.style.opacity = 1 - i / back.clientWidth;
forward.style.left = (back.clientWidth - i) / 2 + "px";
if (i <= 0) {
window.clearInterval(intervalClear);
forward.style.display = "none";
}
}, 4);
}
//选中点
function changeIndicator(index) {
var children = indicator.children;
for (var i = 0; i < children.length; i++) {
if (i == index) {
children[i].style.backgroundColor = "red";
} else {
children[i].style.backgroundColor = "#fff";
}
}
}
效果图: