原生JS实现轮播图，封装动画函数
2020-05-07 本文已影响0人
7cc3bea274fc
视频讲解可观看B站视频
https://www.bilibili.com/video/BV1f441117vj/
封装 animate 动画函数
function getStyle(obj, attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, null)[attr];
}
}
function animate(obj,json,callback){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var isStop = true;
for(var attr in json){
var now = 0;
if(attr == 'opacity'){
now = parseInt(getStyle(obj,attr)*100);
}else{
now = parseInt(getStyle(obj,attr));
}
var speed = (json[attr] - now) / 8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
var cur = now + speed;
if(attr == 'opacity'){
obj.style[attr] = cur / 100;
}else{
obj.style[attr] = cur + 'px';
}
if(json[attr] !== cur){
isStop = false;
}
}
if(isStop){
clearInterval(obj.timer);
callback&&callback();
}
}, 30)
}
轮播图 HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>carousel</title>
<link rel="stylesheet" href="style.css">
<script src="animate.js"></script>
</head>
<body>
<div class="box" id="box">
<div class="slider" id="slider">
<div class="slide"><img src="imgs/banner_05.jpg" alt=""></div>
<div class="slide"><img src="imgs/banner_01.jpg" alt=""></div>
<div class="slide"><img src="imgs/banner_02.jpg" alt=""></div>
<div class="slide"><img src="imgs/banner_03.jpg" alt=""></div>
<div class="slide"><img src="imgs/banner_04.jpg" alt=""></div>
<div class="slide"><img src="imgs/banner_05.jpg" alt=""></div>
<div class="slide"><img src="imgs/banner_01.jpg" alt=""></div>
</div>
<span id="left"><</span>
<span id="right">></span>
<ul class="nav" id="nav">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var box = document.getElementById('box');
var oNavlist = document.getElementById('nav').children;
var slider = document.getElementById('slider');
var left = document.getElementById('left');
var right = document.getElementById('right');
var index = 1;
var timer;
var isMoving = false;
box.onmouseover = function(){
animate(left,{opacity:50})
animate(right,{opacity:50})
clearInterval(timer)
}
box.onmouseout = function(){
animate(left,{opacity:0})
animate(right,{opacity:0})
timer = setInterval(next, 3000);
}
right.onclick = next;
left.onclick = prev;
for( var i=0; i<oNavlist.length; i++ ){
oNavlist[i].index = i;
oNavlist[i].onclick = function(){
index = this.index+1;
navmove();
animate(slider,{left:-1200*index});
}
}
function next(){
if(isMoving){
return;
}
isMoving = true;
index++;
navmove();
animate(slider,{left:-1200*index},function(){
if(index==6){
slider.style.left = '-1200px';
index = 1;
}
isMoving = false;
});
}
function prev(){
if(isMoving){
return;
}
isMoving = true;
index--;
navmove();
animate(slider,{left:-1200*index},function(){
if(index==0){
slider.style.left = '-6000px';
index = 5;
}
isMoving = false;
});
}
function navmove(){
for( var i=0; i<oNavlist.length; i++ ){
oNavlist[i].className = "";
}
if(index >5 ){
oNavlist[0].className = "active";
}else if(index<=0){
oNavlist[4].className = "active";
}else {
oNavlist[index-1].className = "active";
}
}
timer = setInterval(next, 3000);
</script>
</body>
</html>
轮播图 CSS
*{
padding: 0;
margin: 0;
}
ul,li{
list-style: none;
}
.box{
width: 1200px;
height: 397px;
border: 1px solid red;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.slider{
width: 8400px;
position: absolute;
left: -1200px;
}
.slide{
width: 1200px;
overflow: hidden;
float: left;
}
.box>span{
display: block;
width: 30px;
height: 50px;
text-align: center;
cursor: pointer;
color: #fff;
top: 175px;
line-height: 50px;
background: rgb(255,0,0);
font-size: 30px;
position: absolute;
/* display: none; */
opacity: 0;
}
#left{
left: 30px;
}
#right{
right: 30px;
}
.nav{
position: absolute;
left: 500px;
bottom: 20px;
}
.nav>li{
float: left;
width: 20px;
height: 20px;
background: #ccc;
cursor: pointer;
margin: 0 10px;
border-radius: 50%;
}
.nav .active{
background: red;
}
更多内容可扫码关注公众号【前端小猿】
logo.jpg
