轮播图其实就是靠修改元素的translate3d、margin-left、left等css属性值去实现的
如果需要头尾衔接(就是从最后一张播放到第一张时不会出现直接返回第一张的现象),那么需要复制第一张图片添加到最后去,复制添加的那一张图片完全展示出来后,在悄无声息在瞬间将相关的css属性值归零
在这里我写了6种例子
其实第一种只是css属性中比第二种多了个transition属性
第一种比较容易实现:就是单击某个元素是播放到相应图片,有动画的那种(看的来它不是头尾衔接的那种)
css
* {
margin: 0px;
padding: 0px;
user-select: none;
user-select: none;
user-select: none;
user-select: none;
user-select: none;
/*适用ie*/
user-select: none;
user-select: none;
}
body {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #f3f3f3;
}
.main {
padding: 7px;
width: 31.25rem;
height: 12.5rem;
position: relative;
border: 1px solid #ccc;
}
.PictureRegion {
width: 31.25rem;
height: 12.5rem;
overflow: hidden;
}
.PictureList {
width: 500%;
height: 12.5rem;
transition: 1s ease;
display: flex;
align-items: center;
justify-content: center;
}
.Picture {
height: 12.5rem;
color: #f3f3f3;
font-size: 3.5rem;
text-align: center;
line-height: 12.5rem;
width: calc(100% / 5);
background-color: green;
}
.shield {
width: 31.25rem;
height: 12.5rem;
position: absolute;
top: 7px;
}
.ShieldTop {
width: 100%;
height: calc(100% - 32px);
padding: 10px 10px 0px;
box-sizing: border-box;
}
.ShieldButtom {
width: 100%;
height: 32px;
padding: 0px 10px 10px;
box-sizing: border-box;
}
.ShieldButtom>ul {
min-height: 20px;
list-style-type: none;
display: flex;
align-items: center;
justify-content: flex-end;
}
.ShieldButtom>ul>li {
width: 20px;
height: 20px;
line-height: 1.25rem;
cursor: pointer;
text-align: center;
border: 1px solid #CCCCCC;
}
.ShieldButtom>ul>li+li {
margin-left: 10px;
}
.current {
color: #000000;
background-color: #f3f3f3;
}
.ShieldButtom>ul>li:hover,
.currentPro {
color: #f3f3f3;
background-color: #800000;
}
.ShieldTop>label {
width: 40px;
height: 40px;
position: absolute;
top: 35%;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #f3f3f3;
opacity: 0.3;
border: 1px solid #FFFFFF;
background-color: #000000;
}
.ShieldTop>label:nth-child(2) {
right: 10px;
}
html
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div class="main">
<div class="PictureRegion">
<div class="PictureList">
<div class="Picture">第一张</div>
<div class="Picture">第二张</div>
<div class="Picture">第三张</div>
<div class="Picture">第四张</div>
<div class="Picture">第五张</div>
</div>
</div>
<div class="shield">
<div class="ShieldTop">
<label class="left"><</label>
<label class="right">></label>
</div>
<div class="ShieldButtom">
<ul></ul>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
javascript
(function() {
let PictureList = document.querySelector('.PictureList'),
ShieldButtomUl = document.querySelector('.ShieldButtom>ul'),
left = document.querySelector('.left'),
right = document.querySelector('.right'),
shield = document.querySelector('.shield');
let LeftNum = 0;
function BgColor(LeftNum) {
for (let itme of ShieldButtomUl.children) {
if (parseInt(itme.innerText) !== LeftNum) {
itme.classList.remove('currentPro');
itme.classList.add('current');
} else {
itme.classList.remove('current');
itme.classList.add('currentPro');
}
}
}
function roll() {
if (LeftNum === 4) {
LeftNum = 0;
PictureList.style.transform = `translate3d(${LeftNum}px, 0px, 0px)`;
BgColor(1);
} else {
LeftNum += 1;
PictureList.style.transform = `translate3d(-${LeftNum*500}px, 0px, 0px)`;
BgColor(LeftNum + 1);
}
}
let setTime = setInterval(roll, 5000);
for (let i = 0; i < PictureList.children.length; i++) {
let li = document.createElement('li');
li.innerText = i + 1;
if (i === 0) {
li.classList.add('currentPro');
} else {
li.classList.add('current');
}
li.addEventListener('click', function() {
LeftNum = parseInt(li.innerText)
LeftNum -= 2;
roll();
});
ShieldButtomUl.appendChild(li);
}
right.addEventListener('click', function() {
roll();
});
left.addEventListener('click', function() {
LeftNum -= 2;
if (LeftNum === -2) {
LeftNum = 3;
}
roll();
});
shield.addEventListener('mouseover', (e) => {
clearInterval(setTime);
});
shield.addEventListener('mouseout', (e) => {
setTime = setInterval(roll, 5000);
});
})();
第二种比较容易实现:就是单击某个元素是播放到相应图片,全程无动画的那种(瞬间展示相应图片,所以看不出来其实它不是头尾衔接的那种)
css
* {
margin: 0px;
padding: 0px;
user-select: none;
user-select: none;
user-select: none;
user-select: none;
user-select: none;
/*适用ie*/
user-select: none;
user-select: none;
}
body {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #f3f3f3;
}
.main {
padding: 7px;
width: 31.25rem;
height: 12.5rem;
position: relative;
border: 1px solid #ccc;
}
.PictureRegion {
width: 31.25rem;
height: 12.5rem;
overflow: hidden;
}
.PictureList {
width: 500%;
height: 12.5rem;
/* transition: 1s ease; */
display: flex;
align-items: center;
justify-content: center;
}
.Picture {
height: 12.5rem;
color: #f3f3f3;
font-size: 3.5rem;
text-align: center;
line-height: 12.5rem;
width: calc(100% / 5);
background-color: green;
}
.shield {
width: 31.25rem;
height: 12.5rem;
position: absolute;
top: 7px;
}
.ShieldTop {
width: 100%;
height: calc(100% - 32px);
padding: 10px 10px 0px;
box-sizing: border-box;
}
.ShieldButtom {
width: 100%;
height: 32px;
padding: 0px 10px 10px;
box-sizing: border-box;
}
.ShieldButtom>ul {
min-height: 20px;
list-style-type: none;
display: flex;
align-items: center;
justify-content: flex-end;
}
.ShieldButtom>ul>li {
width: 20px;
height: 20px;
line-height: 1.25rem;
cursor: pointer;
text-align: center;
border: 1px solid #CCCCCC;
}
.ShieldButtom>ul>li+li {
margin-left: 10px;
}
.current {
color: #000000;
background-color: #f3f3f3;
}
.ShieldButtom>ul>li:hover,
.currentPro {
color: #f3f3f3;
background-color: #800000;
}
.ShieldTop>label {
width: 40px;
height: 40px;
position: absolute;
top: 35%;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #f3f3f3;
opacity: 0.3;
border: 1px solid #FFFFFF;
background-color: #000000;
}
.ShieldTop>label:nth-child(2) {
right: 10px;
}
html
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div class="main">
<div class="PictureRegion">
<div class="PictureList">
<div class="Picture">第一张</div>
<div class="Picture">第二张</div>
<div class="Picture">第三张</div>
<div class="Picture">第四张</div>
<div class="Picture">第五张</div>
</div>
</div>
<div class="shield">
<div class="ShieldTop">
<label class="left"><</label>
<label class="right">></label>
</div>
<div class="ShieldButtom">
<ul></ul>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
javascript
(function() {
let PictureList = document.querySelector('.PictureList'),
ShieldButtomUl = document.querySelector('.ShieldButtom>ul'),
left = document.querySelector('.left'),
right = document.querySelector('.right'),
shield = document.querySelector('.shield');
let LeftNum = 0;
function BgColor(LeftNum) {
for (let itme of ShieldButtomUl.children) {
if (parseInt(itme.innerText) !== LeftNum) {
itme.classList.remove('currentPro');
itme.classList.add('current');
} else {
itme.classList.remove('current');
itme.classList.add('currentPro');
}
}
}
function roll() {
if (LeftNum === 4) {
LeftNum = 0;
PictureList.style.transform = `translate3d(${LeftNum}px, 0px, 0px)`;
BgColor(1);
} else {
LeftNum += 1;
PictureList.style.transform = `translate3d(-${LeftNum*500}px, 0px, 0px)`;
BgColor(LeftNum + 1);
}
}
let setTime = setInterval(roll, 5000);
for (let i = 0; i < PictureList.children.length; i++) {
let li = document.createElement('li');
li.innerText = i + 1;
if (i === 0) {
li.classList.add('currentPro');
} else {
li.classList.add('current');
}
li.addEventListener('click', function() {
LeftNum = parseInt(li.innerText)
LeftNum -= 2;
roll();
});
ShieldButtomUl.appendChild(li);
}
right.addEventListener('click', function() {
roll();
});
left.addEventListener('click', function() {
LeftNum -= 2;
if (LeftNum === -2) {
LeftNum = 3;
}
roll();
});
shield.addEventListener('mouseover', (e) => {
clearInterval(setTime);
});
shield.addEventListener('mouseout', (e) => {
setTime = setInterval(roll, 5000);
});
})();
第三种细节有点麻烦:就是单击某个元素是播放到相应图片,有动画(不是css动画)而且是头尾衔接的那种
css
* {
margin: 0px;
padding: 0px;
user-select: none;
user-select: none;
user-select: none;
user-select: none;
user-select: none;
/*适用ie*/
user-select: none;
user-select: none;
}
body {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #f3f3f3;
}
.main {
padding: 7px;
width: 31.25rem;
height: 12.5rem;
position: relative;
border: 1px solid #ccc;
}
.PictureRegion {
width: 31.25rem;
height: 12.5rem;
overflow: hidden;
}
.PictureList {
height: 12.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.Picture {
height: 12.5rem;
color: #f3f3f3;
font-size: 3.5rem;
text-align: center;
line-height: 12.5rem;
width: calc(100% / 5);
background-color: green;
}
.shield {
width: 31.25rem;
height: 12.5rem;
position: absolute;
top: 7px;
}
.ShieldTop {
width: 100%;
height: calc(100% - 32px);
padding: 10px 10px 0px;
box-sizing: border-box;
}
.ShieldButtom {
width: 100%;
height: 32px;
padding: 0px 10px 10px;
box-sizing: border-box;
}
.ShieldButtom>ul {
min-height: 20px;
list-style-type: none;
display: flex;
align-items: center;
justify-content: flex-end;
}
.ShieldButtom>ul>li {
width: 20px;
height: 20px;
line-height: 1.25rem;
cursor: pointer;
text-align: center;
border: 1px solid #CCCCCC;
}
.ShieldButtom>ul>li+li {
margin-left: 10px;
}
.current {
color: #000000;
background-color: #f3f3f3;
}
.ShieldButtom>ul>li:hover,
.currentPro {
color: #f3f3f3;
background-color: #800000;
}
.ShieldTop>label {
width: 40px;
height: 40px;
position: absolute;
top: 35%;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #f3f3f3;
opacity: 0.3;
border: 1px solid #FFFFFF;
background-color: #000000;
}
.ShieldTop>label:nth-child(2) {
right: 10px;
}
html
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div class="main">
<div class="PictureRegion">
<div class="PictureList">
<div class="Picture">第一张</div>
<div class="Picture">第二张</div>
<div class="Picture">第三张</div>
<div class="Picture">第四张</div>
<div class="Picture">第五张</div>
</div>
</div>
<div class="shield">
<div class="ShieldTop">
<label class="left"><</label>
<label class="right">></label>
</div>
<div class="ShieldButtom">
<ul></ul>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
javascript
(function() {
let PictureList = document.querySelector('.PictureList'),
ShieldButtomUl = document.querySelector('.ShieldButtom>ul'),
left = document.querySelector('.left'),
right = document.querySelector('.right'),
shield = document.querySelector('.shield');
let LeftNum = 0,
sign = null;
function BgColor(LeftNum) {
for (let itme of ShieldButtomUl.children) {
if (parseInt(itme.innerText) !== LeftNum) {
itme.classList.remove('currentPro');
itme.classList.add('current');
} else {
itme.classList.remove('current');
itme.classList.add('currentPro');
}
}
}
for (let i = 0; i < PictureList.children.length; i++) {
let li = document.createElement('li');
li.innerText = i + 1;
if (i === 0) {
li.classList.add('currentPro');
} else {
li.classList.add('current');
}
li.addEventListener('click', function() {
if ((parseInt(li.innerText) - 1) !== Math.abs(LeftNum / 500)) {
let Num = 0;
if ((parseInt(li.innerText) - 1) > Math.abs(LeftNum / 500) || Math.abs(LeftNum / 500) ===
5) {
if (Math.abs(LeftNum / 500) === 5 || Math.abs(LeftNum / 500) === 0) {
Num = parseInt(li.innerText) - 1;
} else {
Num = (parseInt(li.innerText) - 1) - Math.abs(LeftNum / 500);
}
if (Math.abs(LeftNum / 500) % 1 !== 0) {
Num--;
}
for (let i = 0; i < Num; i++) {
NextRoll();
}
} else {
Num = Math.abs(LeftNum / 500) - (parseInt(li.innerText) - 1);
if (Math.abs(LeftNum / 500) % 1 !== 0) {
Num--;
}
for (let i = 0; i < Num; i++) {
PreviousRoll();
}
}
}
});
ShieldButtomUl.appendChild(li);
}
PictureList.appendChild(PictureList.children[0].cloneNode(true));
PictureList.style.width = PictureList.children.length * 100 + "%";
function NextRoll() {
let timer = setInterval(function() {
if (LeftNum === -2500) {
LeftNum = 0;
sign = 0;
PictureList.style.transform = `translate3d(${LeftNum}px, 0px, 0px)`;
} else {
LeftNum = LeftNum - 12.5;
PictureList.style.transform = `translate3d(${LeftNum}px, 0px, 0px)`;
}
if (LeftNum % 500 === 0) {
if (Math.abs(LeftNum / 500) > 0 && Math.abs(LeftNum / 500) < 5) {
BgColor(Math.abs(LeftNum / 500) + 1);
} else {
BgColor(1);
}
if (sign !== 0) {
clearInterval(timer);
}
sign = null;
}
}, 15);
}
function PreviousRoll() {
let timer = setInterval(function() {
if (LeftNum === 0) {
LeftNum = -2500;
sign = 0;
PictureList.style.transform = `translate3d(${LeftNum}px, 0px, 0px)`;
} else {
LeftNum = LeftNum + 12.5;
PictureList.style.transform = `translate3d(${LeftNum}px, 0px, 0px)`;
}
if (LeftNum % 500 === 0) {
if (Math.abs(LeftNum / 500) >= 0 && Math.abs(LeftNum / 500) < 5) {
BgColor(Math.abs(LeftNum / 500) + 1);
}
if (sign !== 0) {
clearInterval(timer);
}
sign = null;
}
}, 15);
}
let setTime = setInterval(NextRoll, 3000);
right.addEventListener('click', function() {
NextRoll();
});
left.addEventListener('click', function() {
PreviousRoll();
});
shield.addEventListener('mouseover', (e) => {
clearInterval(setTime);
});
shield.addEventListener('mouseout', (e) => {
setTime = setInterval(NextRoll, 3000);
});
})();
第四种:用户无法操作,页码加载完成后自动开始,鼠标移入时停止,鼠标移出后再次开始,有动画(不是css动画)而且是头尾衔接的那种
css
* {
margin: 0px;
padding: 0px;
user-select: none;
user-select: none;
user-select: none;
user-select: none;
user-select: none;
/*适用ie*/
user-select: none;
user-select: none;
}
body {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #f3f3f3;
}
.main {
padding: 7px;
width: 31.25rem;
height: 12.5rem;
position: relative;
border: 1px solid #ccc;
}
.PictureRegion {
width: 31.25rem;
height: 12.5rem;
overflow: hidden;
}
.PictureList {
height: 12.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.Picture {
height: 12.5rem;
color: #f3f3f3;
font-size: 3.5rem;
text-align: center;
line-height: 12.5rem;
width: calc(100% / 5);
background-color: green;
}
html
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div class="main">
<div class="PictureRegion">
<div class="PictureList">
<div class="Picture">第一张</div>
<div class="Picture">第二张</div>
<div class="Picture">第三张</div>
<div class="Picture">第四张</div>
<div class="Picture">第五张</div>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
javascript
(function() {
let PictureList = document.querySelector('.PictureList');
let LeftNum = 0,
setTime = null,
timer;
PictureList.appendChild(PictureList.children[0].cloneNode(true));
PictureList.style.width = PictureList.children.length * 100 + "%";
function roll() {
timer = setInterval(function() {
if (LeftNum === -2500) {
LeftNum = 0;
sign = 0;
PictureList.style.transform = `translate3d(${LeftNum}px, 0px, 0px)`;
} else {
LeftNum = LeftNum - 0.5;
PictureList.style.transform = `translate3d(${LeftNum}px, 0px, 0px)`;
}
}, 15);
}
setTime = setTimeout(roll, 500);
PictureList.addEventListener('mouseover', (e) => {
clearTimeout(setTime);
clearInterval(timer);
});
PictureList.addEventListener('mouseout', (e) => {
setTime = setTimeout(roll, 0);
});
})();
第五种:淡入淡出,有动画(不是css动画)的那种
css
* {
margin: 0px;
padding: 0px;
user-select: none;
user-select: none;
user-select: none;
user-select: none;
user-select: none;
/*适用ie*/
user-select: none;
user-select: none;
}
body {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #f3f3f3;
}
.main {
padding: 7px;
width: 31.25rem;
height: 12.5rem;
position: relative;
border: 1px solid #ccc;
}
.PictureRegion {
width: 31.25rem;
height: 12.5rem;
overflow: hidden;
}
.PictureList {
width: 31.25rem;
height: 12.5rem;
position: relative;
background-color: green;
}
.Picture {
position: absolute;
width: 31.25rem;
height: 12.5rem;
color: #f3f3f3;
font-size: 3.5rem;
text-align: center;
line-height: 12.5rem;
background-color: green;
transition: 1.5s ease;
opacity: 0;
z-index: 0;
}
.PicturePro {
z-index: 1;
opacity: 1;
}
.shield {
width: 31.25rem;
height: 12.5rem;
position: absolute;
z-index: 1;
top: 7px;
}
.ShieldTop {
width: 100%;
height: calc(100% - 32px);
padding: 10px 10px 0px;
box-sizing: border-box;
}
.ShieldButtom {
width: 100%;
height: 32px;
padding: 0px 10px 10px;
box-sizing: border-box;
}
.ShieldButtom>ul {
min-height: 20px;
list-style-type: none;
display: flex;
align-items: center;
justify-content: flex-end;
}
.ShieldButtom>ul>li {
width: 20px;
height: 20px;
line-height: 1.25rem;
cursor: pointer;
text-align: center;
border: 1px solid #CCCCCC;
}
.ShieldButtom>ul>li+li {
margin-left: 10px;
}
.current {
color: #000000;
background-color: #f3f3f3;
}
.ShieldButtom>ul>li:hover,
.currentPro {
color: #f3f3f3;
background-color: #800000;
}
.ShieldTop>label {
width: 40px;
height: 40px;
position: absolute;
top: 35%;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #f3f3f3;
opacity: 0.3;
border: 1px solid #FFFFFF;
background-color: #000000;
}
.ShieldTop>label:nth-child(2) {
right: 10px;
}
html
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div class="main">
<div class="PictureRegion">
<div class="PictureList">
<div class="Picture PicturePro">淡入淡出</div>
<div class="Picture">轮播图</div>
<div class="Picture">图片效果才会明显</div>
<div class="Picture">这不是图片</div>
<div class="Picture">索引效果不明显</div>
</div>
</div>
<div class="shield">
<div class="ShieldTop">
<label class="left"><</label>
<label class="right">></label>
</div>
<div class="ShieldButtom">
<ul></ul>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
javascript
(function() {
let PictureList = document.querySelector('.PictureList'),
ShieldButtomUl = document.querySelector('.ShieldButtom>ul'),
left = document.querySelector('.left'),
right = document.querySelector('.right'),
shield = document.querySelector('.shield'),
itmeArray = new Array();
let LeftNum = 0;
function BgColor(LeftNum) {
for (let itme of ShieldButtomUl.children) {
if (parseInt(itme.innerText) !== LeftNum) {
itme.classList.remove('currentPro');
itme.classList.add('current');
} else {
itme.classList.remove('current');
itme.classList.add('currentPro');
}
}
}
function roll() {
if (LeftNum === 4) {
LeftNum = 0;
BgColor(1);
} else {
LeftNum += 1;
BgColor(LeftNum + 1);
}
for (let i in itmeArray) {
if (parseInt(i) !== LeftNum) {
itmeArray[parseInt(i)].classList.remove('PicturePro');
} else {
itmeArray[parseInt(i)].classList.add('PicturePro');
}
}
}
let setTime = setInterval(roll, 5000);
for (let i = 0; i < PictureList.children.length; i++) {
itmeArray.push(PictureList.children[i]);
let li = document.createElement('li');
li.innerText = i + 1;
if (i === 0) {
li.classList.add('currentPro');
} else {
li.classList.add('current');
}
li.addEventListener('click', function() {
LeftNum = parseInt(li.innerText)
LeftNum -= 2;
roll();
});
ShieldButtomUl.appendChild(li);
}
right.addEventListener('click', function() {
roll();
});
left.addEventListener('click', function() {
LeftNum -= 2;
if (LeftNum === -2) {
LeftNum = 3;
}
roll();
});
shield.addEventListener('mouseover', (e) => {
clearInterval(setTime);
});
shield.addEventListener('mouseout', (e) => {
setTime = setInterval(roll, 5000);
});
})();
第六种:模仿京东商城首页的那个什么图
css
* {
margin: 0px;
padding: 0px;
user-select: none;
user-select: none;
user-select: none;
user-select: none;
user-select: none;
/*适用ie*/
user-select: none;
user-select: none;
/* 稳定字体 */
font-smoothing: antialiased;
}
body {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #f3f3f3;
}
.main {
padding: 7px;
width: 31.25rem;
height: 12.5rem;
position: relative;
border: 1px solid #cccccc;
}
.PictureRegion {
width: 31.25rem;
height: 12.5rem;
overflow: hidden;
}
.PictureList {
height: 12.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.Picture {
height: 12.5rem;
color: #f3f3f3;
font-size: 3.5rem;
text-align: center;
line-height: 12.5rem;
width: calc(100% / 5);
background-color: green;
}
.shield {
width: 31.25rem;
height: 12.5rem;
position: absolute;
top: 7px;
overflow: hidden;
}
.trajectory {
width: 100%;
height: 5px;
background-color: #cccccc;
position: absolute;
bottom: 10px;
display: flex;
align-items: center;
transition: opacity .5s ease;
transition: opacity .5s ease;
}
.trajectoryPro {
opacity: 0;
visibility: hidden;
}
.main:hover .trajectoryPro {
opacity: 1;
visibility: visible;
}
.slider {
width: 50px;
height: 10px;
position: absolute;
border-radius: 3px;
background-color: #800000;
}
html
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div class="main">
<div class="PictureRegion">
<div class="PictureList">
<div class="Picture">第一张</div>
<div class="Picture">第二张</div>
<div class="Picture">第三张</div>
<div class="Picture">第四张</div>
<div class="Picture">第五张</div>
</div>
</div>
<div class="shield">
<div class="trajectory trajectoryPro">
<div class="slider"></div>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
javascript
(function() {
let PictureList = document.querySelector('.PictureList'),
main = document.querySelector('.main'),
shield = document.querySelector('.shield'),
slider = document.querySelector('.slider');
let LeftNum = 0,
setTime = null,
timer = null,
Elayer = 0;
PictureList.appendChild(PictureList.children[0].cloneNode(true));
PictureList.style.width = PictureList.children.length * 100 + "%";
function roll() {
timer = setInterval(function() {
if (LeftNum <= -2500) {
LeftNum = 0;
PictureList.style.transform = `translate3d(${LeftNum}px, 0px, 0px)`;
} else {
LeftNum = LeftNum - 0.5;
PictureList.style.transform = `translate3d(${LeftNum}px, 0px, 0px)`;
}
slider.style.transform = `translate3d(${(Math.abs(LeftNum) / 2500) * 450}px, 0px, 0px)`;
}, 15);
}
setTime = setTimeout(roll, 500);
function dragFun(event) {
event = event || window.event;
let transNum = event.clientX - main.offsetLeft - Elayer;
if (transNum < 0) {
transNum = 0;
} else if (transNum > (slider.parentElement.clientWidth - slider.offsetWidth)) {
transNum = slider.parentElement.clientWidth - slider.offsetWidth;
}
slider.style.transform = `translate3d(${transNum}px, 0px, 0px)`;
LeftNum = (transNum / 450) * -2500;
PictureList.style.transform = `translate3d(${LeftNum}px, 0px, 0px)`;
}
slider.addEventListener('mousedown', function(event) {
slider.parentElement.classList.remove('trajectoryPro');
document.addEventListener('mousemove', dragFun);
document.addEventListener('mouseup', function(e) {
document.removeEventListener("mousemove", dragFun);
if (e.srcElement.nodeName.toLowerCase() === "body") {
clearTimeout(setTime);
setTime = setTimeout(roll, 0);
} else {
Elayer = 0;
}
slider.parentElement.classList.add('trajectoryPro');
});
event = event || window.event;
let transX = document.defaultView.getComputedStyle(slider, null).transform;
if(transX.split(',')[4]){
Elayer = event.clientX - main.offsetLeft - parseInt(transX.split(',')[4]);
}else{
Elayer = event.clientX - main.offsetLeft;
}
});
main.addEventListener('mouseover', (e) => {
clearTimeout(setTime);
clearInterval(timer);
});
main.addEventListener('mouseout', (e) => {
if (Elayer === 0) {
setTime = setTimeout(roll, 0);
}
});
})();