轮播图2（上下轮播）
Posted xiaokemo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了轮播图2（上下轮播）相关的知识，希望对你有一定的参考价值。
<!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;
}
.warp {
width: 350px;
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">
<div class="warp">
<span class="left"><img src="login/images/prev.png"></span>
<span class="right"><img src="login/images/next.png"></span>
<ul>
<li><img src="login/images/01.jpg"></li>
<li><img src="login/images/02.jpg"></li>
<li><img src="login/images/03.jpg"></li>
<li><img src="login/images/04.jpg"></li>
<li><img src="login/images/05.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>
以上是关于轮播图2（上下轮播）的主要内容，如果未能解决你的问题，请参考以下文章