<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
overflow: hidden;
}
#container {
width: 100%;
min-height: 100px;
}
.p {
font-size: 40px;
color: transparent;
text-align: center;
font-weight: bold;
background: linear-gradient(60deg, pink 10%, orange, red, green 30%, blue, black);
mix-blend-mode: color;
-webkit-background-clip: text;
text-shadow: -4px 1px 2px #ffffff;
}
.warp {
width: 400px;
height: 200px;
border: 1px solid #333333;
margin: 70px auto;
overflow: hidden;
position: relative;
}
ul {
list-style: none;
}
.trans {
transition: margin-top 1s ease;
}
ul li {
width: 400px;
height: 200px;
float: left;
}
ul li img {
width: 100%;
height: 100%;
}
ol {
position: absolute;
list-style: none;
top: 180px;
left: 160px;
}
ol li {
margin-right: 5px;
float: left;
width: 18px;
height: 5px;
border: 1px solid #ccc;
background-color: white;
border-radius: 10px;
cursor: pointer;
}
.left{
position: absolute;
display: none;
width: 30px;
height: 40px;
top: 80px;
transform: rotate(90deg);
cursor: pointer;
opacity: 0.5;
}
.left img {
width: 100%;
height: 100%;
}
.left:hover{
opacity: 1;
}
.right{
position: absolute;
display: none;
width: 30px;
height: 40px;
top: 80px;
right: 0;
transform: rotate(270deg);
cursor: pointer;
opacity: 0.5;
}
.right img {
width: 100%;
height: 100%;
}
.right:hover{
opacity: 1;
}
</style>
</head>
<body>
<div id="container">
<p class="p">宇宙无敌上天遁地轮播图</p>
<div class="warp">
<span class="left"><img src="../../img/arrow_bottom.png"></span>
<span class="right"><img src="../../img/arrow_bottom.png"></span>
<ul>
<li><img src="../../img/xhc1.jpg"></li>
<li><img src="../../img/xhc3.jpg"></li>
<li><img src="../../img/xhc4.jpg"></li>
<li><img src="../../img/xhc5.jpg"></li>
<li><img src="../../img/xhc1.jpg"></li>
</ul>
<ol>
<li index="1"></li>
<li index="2"></li>
<li index="3"></li>
<li index="4"></li>
</ol>
</div>
</div>
<script>
(function() {
let warp = document.querySelector('.warp');
let oUl = document.querySelector('ul');
let oLi = document.querySelectorAll('ol li');
let allLi = document.querySelectorAll('ul li').length-1;
let left = document.querySelector('.left');
let right = document.querySelector('.right');
let currentIndex = 1;
let T = null;
console.log(oLi);
oLi[0].style.backgroundColor = '#333333';
T = setInterval(begin, 2000);
//鼠标移入移出
warp.addEventListener('mouseenter', () => {
left.style.display = 'inline-block';
right.style.display = 'inline-block';
clearInterval(T);
T = null;
});
warp.addEventListener('mouseleave', () => {
left.style.display = 'none';
right.style.display = 'none';
T = setInterval(begin, 2000);
});
//li 点击跳转事件
oLi.forEach((li,index)=>{
li.onclick = function(){
oUl.style.marginTop = -200 * index + 'px';//index是点击ol的角标
oUl.className = 'trans';
currentIndex=index;
for(let i = 0; i<li.parentNode.children.length; i++){
oLi[i].style.backgroundColor = '#ffffff';
}
li.style.backgroundColor = '#333333';
}
})
//左右箭头点击跳转
let curr = 0;
left.onclick = function(){
console.log(currentIndex);
if(currentIndex<1){
currentIndex = 4
}
curr=currentIndex;
curr--;
console.log(curr);
oUl.style.marginTop = -200 * curr + 'px';
currentIndex=curr;
for(let i = 0; i<oLi[0].parentNode.children.length; i++){
oLi[i].style.backgroundColor = '#ffffff';
}
oLi[curr].style.backgroundColor = '#333333';
}
right.onclick = function(){
if(currentIndex>=3){
currentIndex = -1
}
curr=currentIndex;
curr++;
oUl.style.marginTop = -200 * curr + 'px';
currentIndex=curr;
for(let i = 0; i<oLi[0].parentNode.children.length; i++){
oLi[i].style.backgroundColor = '#ffffff';
}
oLi[curr].style.backgroundColor = '#333333';
console.log(currentIndex);
}
//轮播方法
function begin() {
if (currentIndex > allLi) {
oUl.className = '';
oLi[0].style.backgroundColor = '#333333';
oLi[currentIndex - 2].style.backgroundColor = '#ffffff';
oUl.style.marginTop = 0 + 'px';
currentIndex = 1;
} else if (currentIndex < allLi) {
if(currentIndex===0){
currentIndex=1;
}
oUl.className = 'trans';
oUl.style.marginTop = -200 * currentIndex + 'px';
oLi[currentIndex].style.backgroundColor = '#333333';
oLi[currentIndex - 1].style.backgroundColor = '#ffffff';
currentIndex++;
} else if (currentIndex === allLi) {
oUl.style.marginTop = -200 * currentIndex + 'px';
oLi[0].style.backgroundColor = '#333333';
oLi[allLi-1].style.backgroundColor = '#ffffff';
currentIndex++;
}
}
})()
</script>
</body>
</html>
来找我玩啊
