JS 轮播图
2022-07-01 本文已影响0人
coderhzc
轮播图
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>船舶档案</title>
<style>
:root {
--theme-bgc: linear-gradient(to right, rgb(98, 131, 254), rgb(79, 102, 238));
--theme-color: rgb(79, 102, 238);
--fontColor: #ececec;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
body {}
.box {
width: 540px;
height: 450px;
margin: 50px;
user-select: none;
}
.box #tab {
width: 100%;
display: flex;
height: 30px;
line-height: 30px;
border-bottom: 2px rgb(240, 240, 240) solid;
transition: all .2s;
}
.box #tab>.activeTab {
background: var(--theme-bgc);
color: var(--fontColor);
}
.box #tab>li>input[type="radio"] {
display: none;
}
.box #tab>li {
margin: 0 10px;
padding: 0 5px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
cursor: pointer;
transition: all .2s;
background-color: #eee;
color: rgb(68, 68, 68);
}
#mainImg {
width: 100%;
margin: 10px;
transition: all .2s;
position: relative;
}
#mainImg>span {
display: flex;
flex-wrap: wrap;
flex-direction: column;
position: absolute;
justify-content: center;
align-items: flex-end;
bottom: 10px;
right: 40px;
color: #fff;
}
#mainImg>span>div {
width: 20px;
height: 20px;
border-radius: 50%;
text-align: center;
line-height: 20px;
margin: 5px;
background-color: rgba(0, 0, 0, .4);
}
#mainImg>span>button {
background: var(--theme-bgc);
outline: none;
color: var(--fontColor);
border: none;
border-radius: 3px;
padding: 3px 5px;
}
#mainImg img {
width: 96%;
transition: all .2s;
}
.carousel {
width: 96%;
height: 68px;
margin: 0 10px;
position: relative;
}
.carousel ul {
height: 100%;
display: flex;
align-items: center;
margin: 0 30px;
justify-content: space-between;
overflow: hidden;
}
.carousel ul>li {
height: 100%;
margin: 0 5px;
transition: all .1s;
position: relative;
}
.carousel ul>li:nth-child(1) {
margin: 0;
}
.carousel ul>li>img {
height: 100%;
cursor: pointer;
}
.carousel ul>li>span {
position: absolute;
right: 5px;
bottom: 5px;
color: #fff;
font-size: 12px;
}
.carousel #lBtn,
.carousel #rBtn {
position: absolute;
width: 20px;
height: 100%;
background: var(--theme-bgc);
cursor: pointer;
}
.carousel #lBtn>img,
.carousel #rBtn>img {
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.carousel #lBtn {
top: 0;
left: 0;
}
.carousel #rBtn {
top: 0;
right: 0;
}
.activeImg {
border: 2px var(--theme-color) solid;
padding: 3px;
}
#tabBody>li {
display: none;
transition: all .5s;
}
#tabBody>.activeTab {
display: block;
}
embed {
width: 20px;
height: 100%;
line-height: 68px;
}
</style>
</head>
<body>
<div class="box">
<!-- <ul id="tab">
<li class="activeTab">
<input checked type="radio" name="name" id="tab1" />
<label data-id="1" for="tab1">船舶图片</label>
</li>
<li>
<input type="radio" name="name" id="tab2" />
<label data-id="2" for="tab2">过往记录</label>
</li>
<li>
<input type="radio" name="name" id="tab3" />
<label data-id="3" for="tab3">历史报警</label>
</li>
</ul> -->
<ul id="tabBody">
<li class="activeTab content">
<div id="mainImg">
<!-- 主图位置 -->
</div>
<div class="carousel">
<div id="lBtn">
<img src="./icon/left.png" alt="">
</div>
<ul id="imgBox">
<!-- 轮播图位置 -->
</ul>
<div id="rBtn">
<img src="./icon/right.png" alt="">
</div>
</div>
</li>
<li class="content">2</li>
<li class="content">3</li>
</ul>
</div>
</body>
</html>
<script>
let imgList = [
'./img/BingWallpaper.jpg',
'./img/BingWallpaper (1).jpg',
'./img/BingWallpaper (2).jpg',
'./img/BingWallpaper (3).jpg',
'./img/BingWallpaper (4).jpg',
'./img/BingWallpaper (5).jpg',
'./img/BingWallpaper (6).jpg',
'./img/BingWallpaper (8).jpg',
'./img/BingWallpaper (9).jpg',
]
let li_html = ''
imgList.forEach((img, index) => {
li_html +=
`<li class="${index === 0 ? 'activeImg' : ''}">
<img data-imgId="${index + 1}" src="${img}">
<span>${index + 1}/${imgList.length}</span>
</li>`
})
// 初始化赋值
imgBox.innerHTML = li_html
mainImg.innerHTML = getMainImgHTML(imgList[0])
// 左按钮点击
lBtn.onclick = (e) => {
if (imgList.length < 5) return false
let last_li = imgBox.lastChild
let last_img = last_li.querySelector('img')
let imgId = last_img.dataset.imgid
let para = document.createElement("li");//新建li标签
para.innerHTML = `<img data-imgid="${imgId}" src='${last_img.src}' /> <span>${imgId}/${imgList.length}</span>`//添加img
imgBox.insertBefore(para, imgBox.querySelector('li'));
imgBox.removeChild(last_li)
// 是否有包含选中的class
let isClass = true;
imgBox.querySelectorAll('li').forEach((liEle, index) => {
if (index < 4 && liEle.classList.contains('activeImg')) isClass = false
})
// 判断是否有选中图片
if (isClass) {
imgBox.querySelectorAll("li").forEach(ele => {
ele.classList.remove('activeImg')
});
let li = imgBox.querySelectorAll('li')[3]
let img = li.querySelector('img')
li.classList.add('activeImg')
mainImg.innerHTML = getMainImgHTML(img.src)
}
}
// 右按钮点击
rBtn.onclick = (e) => {
if (imgList.length < 5) return false
let li_remove = imgBox.querySelector('li')
let img_remove = imgBox.querySelector('li>img')
let imgId = img_remove.dataset.imgid
let removeImg = img_remove.src
imgBox.removeChild(li_remove)
// 是否有包含选中的class
let isClass = true;
imgBox.querySelectorAll('li').forEach((liEle, index) => {
if (index < 4 && liEle.classList.contains('activeImg')) isClass = false
})
// 判断是否有选中图片
if (isClass) {
let li = imgBox.querySelector('li')
let img = li.querySelector('img')
li.classList.add('activeImg')
mainImg.innerHTML = getMainImgHTML(img.src)
}
//创建li元素对象并循环新增图片
let li = document.createElement("li");
li.innerHTML = `<img data-imgid=${imgId} src='${removeImg}' /> <span>${imgId}/${imgList.length}</span>`
imgBox.appendChild(li)
}
// 设置主图
mainImg.onclick = ({ target }) => {
if (target.tagName.toLowerCase() === 'button') {
document.body.style.background = `url('${target.dataset.mainimg}') no-repeat center center`
}
}
// 图片点击
imgBox.onclick = (e) => emendationEle(e, imgBox, ["img"], "activeImg", (target) => mainImg.innerHTML = getMainImgHTML(target.src))
// tab栏点击
// tab.onclick = (e) => emendationEle(e, tab, ["label"], "activeTab", (target) => {
// // 显示隐藏tab内容
// tabBody.querySelectorAll('.content').forEach(liEle => liEle.classList.remove('activeTab'))
// tabBody.querySelectorAll('.content')[target.dataset.id - 1].classList.add('activeTab')
// })
// 增删元素class
function emendationEle(e, ele, includesEle, className, callback = () => { }) {
e = e || window.event; //这一行及下一行是为兼容IE8及以下版本
let target = e.target || e.srcElement;
let node = target.tagName.toLowerCase()
if (includesEle.includes(node)) {
ele.querySelectorAll('li').forEach((element, index) => {
element.classList.remove(className)
});
target.parentNode.classList.add(className)
callback(target)
}
}
function getMainImgHTML(img_path) {
return `<img src="${img_path}" />
<span>
<div>+</div>
<div>-</div>
<button id="mainBtnClick" data-mainImg="${img_path}">设置为主图</button>
</span>`
}
</script>
实际截图
image.png
