js上课小案例，利用函数传参完成多个幻灯片的制作。

具体效果点击查看

1、html代码

<div class="banner tab0">
<ul class="pics">
</ul>
<a href="#" class="prev icon "><i class="iconfont icon-left"></i></a>
<a href="#" class="next icon "><i class="iconfont icon-right"></i></a>
<h3 class="title"><a href="#"></a></h3>
<ul class="doit">
</ul>
</div>
<div class="banner tab1">
<ul class="pics">
</ul>
<a href="#" class="prev icon "><i class="iconfont icon-left"></i></a>
<a href="#" class="next icon "><i class="iconfont icon-right"></i></a>
<h3 class="title"><a href="#"></a></h3>
<ul class="doit">
</ul>
</div>

2、css代码

* {
box-sizing: border-box;
}

body {
font-family: Arial, Helvetica, sans-serif, "microsoft Yahei";
color: #333;
font-size: 1rem;
}

body,
ul,
li,
h3 {
margin: 0;
padding: 0;
}

li {
list-style: none;
}

a {
text-decoration: none;
transition: 0.2s;
}

.banner {
width: 610px;
height: 346px;
margin: 20px auto;
position: relative;
overflow: hidden;
}

.banner:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1) 40px, transparent 60px);
}

.pics {
position: absolute;
height: 346px;
transition: 0.3s ease-out;

}

.pics li {
float: left;
}

.icon {
position: absolute;
left: 0;
top: 50%;
width: 40px;
height: 80px;
margin-top: -40px;
background-color: rgba(0, 0, 0, 0.2);
color: #fff;
text-align: center;
line-height: 80px;
z-index: 1;
}

.icon .iconfont {
font-size: 1.5rem;
}

.icon.next {
right: 0;
left: auto;
}

.icon:hover {
background-color: rgba(0, 0, 0, 0.3);
}

.title {
position: absolute;
left: 20px;
bottom: 20px;
font-size: 1rem;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
z-index: 1;
letter-spacing: 0.5px;
}

.title a {
color: #fff;
}

.doit {
position: absolute;
right: 20px;
bottom: 15px;
z-index: 1;
}

.doit li {
display: inline-block;
text-align: right;
width: 8px;
height: 5px;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.5);
cursor: pointer;
margin-left: 5px;
}

.doit li.current {
width: 18px;
background-color: rgba(255, 255, 255, 1)
}

3、js代码

<script>
// 获取对象
var oTab = document.querySelectorAll("[class*=tab]");
// 初始化值
var url = ["images/1.jpg", "images/2.jpg", "images/3.jpg"];
var titles = ["《哪吒》登顶中国动画电影票房冠军！惊艳海报合辑", "改版升级！采用全新设计语言的百度网盘10.0", "阿里神器犸良！零基础也能轻松做酷炫动效"];
var url1 = ["images/01.jpg", "images/02.jpg", "images/03.jpg", "images/04.jpg"];
var titles1 = ["手绘造型秘法", "30天从零基础到软件高手", "揭秘ps合成神技", "打造品牌系列"];

tabPic(oTab[0], url, titles);
tabPic(oTab[1], url1, titles1);


function tabPic(obj, url, titles) {
var oPics = obj.querySelector(".pics");
var oTitle = obj.querySelector(".title");
var oDoit = obj.querySelector(".doit");
var oLi = oDoit.getElementsByTagName("li");
var oPrev = obj.querySelector(".prev");
var oNext = obj.querySelector(".next");
var oldLi = null;

// 结构初始化
url.forEach(function (item) {
oPics.innerHTML += "<li><a href='#'><img src='" + item + "'></a></li>";
})
url.forEach(function () {
oDoit.innerHTML += "<li></li>";
})

// 初始化幻灯片
var num = 0;
var len = url.length;
oPics.style.width = len * 610 + "px";
oldLi = oLi[num];
tab();

// 点击切换
oNext.onclick = function () {
num++;
if (num >= len) {
num = 0;
}
oldLi.classList.remove("current");
tab();

}
oPrev.onclick = function () {
num--;
if (num <= -1) {
num = len - 1;
}
oldLi.classList.remove("current");
tab();

}

function tab() {
oPics.style.transform = "translateX(-" + num * 610 + "px)";
oTitle.innerHTML = "<a href=#>" + titles[num] + "</a>";
oLi[num].classList.add("current");
oldLi = oLi[num];
}
}
</script>