一.要实现的效果
1.每隔两秒,图片切换到下一张;
2.下面tab也跟着切换到下一个。
3.通过淡入淡出来实现。
二.效果图
三.源码下载链接
链接: https://pan.baidu.com/s/1QIe56THwc6TYgSYfsRD3GA 提取码: 2vc5 复制这段内容后打开百度网盘手机App，操作更方便哦
四.源码
----------------------------------------------------------我是分割线-----------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tan切换</title>
<link rel="stylesheet" href="./icon/right_left_direction/iconfont.css">
</head>
<style>
#box {
position: relative;
width: 820px;
height: 380px;
margin: 100px auto;
/* background-color: skyblue; */
overflow: hidden;
}
#box #content {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
#box #content ul {
position: relative;
width: 100%;
height: 100%;
display: flex;
list-style: none;
padding-left: 0;
margin: 0;
}
#box #content ul li {
position: absolute;
top: 0;
left: 0;
width: 820px;
height: 100%;
opacity: 0;
transition-duration: 0.5s;
transition-timing-function: linear;
}
#box #content ul li.show {
position: absolute;
top: 0;
left: 0;
width: 820px;
height: 100%;
opacity: 1;
}
#box>#tabs {
position: absolute;
margin: 0;
width: 100%;
height: 40px;
bottom: 0px;
left: 0px;
}
#box #tabs span {
display: block;
float: left;
width: 164px;
height: 40px;
font-size: 14px;
line-height: 40px;
text-align: center;
background-color: #e3e2e2;
color: #424242;
letter-spacing: 1px;
box-sizing: border-box;
cursor: pointer;
}
#box #tabs span.selected {
color: #ab8e66;
background-color: #f7f6f6;
border-bottom: 2px #cea861 solid;
}
#box .button {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgba(0, 0, 0, .7);
}
#box .button.active {
background-color: orangered;
opacity: 0.7;
}
#box #leftButton {
position: absolute;
z-index: 10;
left: 0;
top: 170px;
}
#box #rightButton {
position: absolute;
right: 0;
z-index: 10;
top: 170px;
}
.button span {
display: block;
font-size: 30px;
font-weight: bold;
line-height: 70px;
color: white;
}
</style>
<body>
<div id="box">
<div id="content">
<ul>
<li class="show">
<img src="./pic/yxlm1.jpg" alt="">
</li>
<li>
<img src="./pic/yxlm2.jpg" alt="">
</li>
<li class="show">
<img src="./pic/yxlm3.jpg" alt="">
</li>
<li>
<img src="./pic/yxlm4.jpg" alt="">
</li>
<li>
<img src="./pic/yxlm5.jpg" alt="">
</li>
</div>
<p id="tabs">
<span class="selected">神机贺岁</span>
<span>2020情人节</span>
<span>王国机神门票</span>
<span>橙色宝箱至臻赛娜</span>
<span>每周限时优惠</span>
</p>
</ul>
<div class="button" id="leftButton">
<span class="left iconfont icon-you"></span>
</div>
<div class="button" id="rightButton">
<span class="right iconfont icon-zuoyoujiantou-copy-copy"></span>
</div>
</div>
<script>
//tab 和左右按钮事件时 产生的效果
var oSpan = document.querySelectorAll("#box #tabs span"),
oContent = document.getElementById("content"),
oLi = document.querySelectorAll("#box #content ul li"),
oLeftButton = document.getElementById("leftButton"),
oRightButton = document.getElementById("rightButton");
var clickNum = 0;
var len = oSpan.length;
function change(index) {
oSpan.forEach(function (item, i) {
if (index === i) {
item.classList.add("selected")
oLi[i].classList.add("show")
} else {
item.classList.remove("selected")
oLi[i].classList.remove("show")
}
})
}
//轮播
setInterval(function(){
clickNum++
clickNum = clickNum>len-1?0:clickNum
change(clickNum)
},2000)
</script>
</body>
</html>
----------------------------------------------------------我是分割线-----------------------------------------------------------------