您的位置：首页 > Web前端 > JavaScript

原生javascript实现循环轮播图滚动效果

2019-03-09 20:19 453 查看

html部分

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
</head>

<body>
<div class="main">
<div class="img">
<img src="img/5.jpg" alt="">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
<img src="img/1.jpg" alt="">
</div>
<ul class="cir">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<a href="javascript:;" id="prev"><</a>
<a href="javascript:;" id="next">></a>
</div>
<script src="js/index.js"></script>
</body>

</html>

css部分

.main {
width:500px;
height:280px;
margin:50px auto;
border:1px solid #333;
position: relative;
overflow: hidden;
}
.img {
position: absolute;
left: -500px;;
width:3500px;
height:280px;
font-size: 0px;
}
.img img {
width:500px;
height:280px;
}
.active {
background-color:orangered;
}
ul {
position: absolute;
left:50%;
margin-left: -45px;
bottom: 20px;
padding:0;
font-size: 0;
background:rgba(255, 255, 255, 0.3);
border-radius: 20px;
}
li {
width:8px;
height:8px;
margin: 5px;
display:inline-block;
list-style: none;
background-color:#fff;
border-radius: 4px;
cursor: pointer;
}
li:active{
background-color:orangered;
transform:scale(2.5);
-ms-transform:rotate(2.5);
-moz-transform:rotate(2.5);
-webkit-transform:rotate(2.5);
-o-transform:rotate(2.5);
}
a {
position: absolute;
width:30px;
height:40px;
display:none;
text-decoration: none;
background:rgba(255, 255, 255, 0.3);
font-size: 24px;
line-height: 40px;
text-align: center;
color:#fff;
top:50%;
margin-top: -20px;
}
#prev {
left:0;
}
#next {
right:0;
}

javascript部分

let prev = document.getElementById("prev");
let next = document.getElementById("next");
let main = document.getElementsByClassName('main')[0];
let cirLis = document.getElementsByClassName('cir')[0].getElementsByTagName('li');
let imgDiv = document.getElementsByClassName("img")[0];
let cirLength = cirLis.length;
let timer = '',timer1 = '', flag = false;
const IMGWIDTH = 500;
const IMGCOUNT = 5;
prev.onclick = function () {
if (flag == true) return;
moveImg(IMGWIDTH);
}
next.onclick = function () {
if (flag == true) return;
moveImg(-IMGWIDTH);
}
for (let i = 0; i < cirLength; i++) {

cirLis[i].onclick = function() {
if (flag == true) return;
let zuobiao = -(i+1) * IMGWIDTH;
let distance = zuobiao - imgDiv.offsetLeft;
if(distance == 0) return;
moveImg(distance);
}
}
main.onmouseover = function() {
prev.style.display = 'block';
next.style.display = "block";
clearInterval(timer1);
}
main.onmouseout = function() {
prev.style.display = 'none';
next.style.display = "none";
timer1 = setInterval(() => {
moveImg(-IMGWIDTH);
}, 2000);
}
timer1 = setInterval(() => {
moveImg(-IMGWIDTH);
}, 2000);

/**
* @param distance 移动图片的相对距离
*/
function moveImg(distance) {

let eachTime = 5;
let time = 600;
let eachDis = distance / (time / eachTime);
let firDis = imgDiv.offsetLeft;
let finDis = imgDiv.offsetLeft + distance;
timer = setInterval(function () {
flag = true;
if (imgDiv.offsetLeft > finDis && distance > 0 || imgDiv.offsetLeft < finDis && distance < 0) {
imgDiv.style.left = finDis + 'px';
if (finDis == 0) {
finDis = -IMGCOUNT * IMGWIDTH;
}
if (finDis == -3000) {
finDis = -IMGWIDTH;
}
imgDiv.style.left = finDis + 'px';
moveLi(finDis);
clearInterval(timer);
flag = false;
return;
}

imgDiv.style.left = imgDiv.offsetLeft + eachDis + "px";
}, eachTime);

}
//移动小圆点
function moveLi(distance) {
distance = Math.abs(distance);
let index = distance / IMGWIDTH;
delActive();
cirLis[index - 1].className = 'active';
}
function delActive() {
let activeLi = document.getElementsByClassName('active')[0];
if (activeLi) {
activeLi.className = "";
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航