JS入门到精通详解 运动函数封装 左右切换轮播图（12）

运动函数封装（要想运动，元素需要脱离文档流）

1. 基础运动函数封装

2. 多属性运动函数封装

function getStyle(obj,attr){
	return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,1)[attr];
}
function sport(obj,json,fn){
	clearInterval(obj.timer);
	obj.timer = setInterval(() => {
		let flag = true;
		for(let attr in json){
			let cur = attr === 'opacity' ? parseInt(parseFloat(getStyle(obj,attr)) * 100) : parseInt(getStyle(obj,attr));
			let speed = (json[attr] - cur) / 8;
			speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
			if(cur !== json[attr]){
				flag = false;
			}
			if(attr === 'opacity'){
				obj.style.opacity = (cur + speed) / 100;
			}else{
				obj.style[attr] = cur + speed + 'px';
			}
		}
		if(flag){
			clearInterval(obj.timer);
			if(fn instanceof Function){
				fn();
			}
		}
	},30)
}

左右切换轮播图书写

<div id="banner">
    <ul class="wrap_img">
        <!-- <li><img src="img/5.jpg" alt=""></li> -->
        <li><img src="img/1.jpg" alt=""></li>
        <li><img src="img/2.jpg" alt=""></li>
        <li><img src="img/3.jpg" alt=""></li>
        <li><img src="img/4.jpg" alt=""></li>
        <li><img src="img/5.jpg" alt=""></li>
        <!-- <li><img src="img/1.jpg" alt=""></li> -->
    </ul>
    <div class="btn">
        <span class="lt_btn"><</span>
        <span class="rt_btn">></span>
    </div>
</div>

*{
    padding: 0;
    margin: 0;
    list-style: none
}
#banner{
    width: 400px;
    height: 300px;
    border: 1px solid black;
    margin: 20px auto;
    overflow: hidden;
    position: relative;
}
.wrap_img{
    position: absolute;
    left: 0;
    right: 0;
}
.wrap_img>li{
    width: 400px;
    height: 300px;
    float: left;
}
img{
    width: 400px;
    height: 300px;
}
.btn>span{
    width: 50px;
    height: 50px;
    color: white;
    position: absolute;
    z-index: 1;
    font-size: 50px;
    opacity: 0.5;
    top: 125px;
}
.lt_btn{
    left: 20px;
}
.rt_btn{
    right: 20px;
}

//一. 获取元素
//1. 获取可视窗口banner
let banner = document.querySelector('#banner');
//2. 获取装载图片的大盒子
let img_box = document.querySelector('.wrap_img');
//3. 获取所有的图片
let imgs = img_box.children;
//4. 获取左按钮
let lt_btn = document.querySelector('.lt_btn');
//5. 获取右按钮
let rt_btn = document.querySelector('.rt_btn');
img_box.style.width = imgs.length * imgs[0].offsetWidth + 'px';

//6. 准备变量
//6.1 当前第几张图片
let index = 1;
//6.2 开关
let flag = true;
img_box.style.left = -imgs[0].offsetWidth + 'px';
// 无缝轮播
// 对页面结构进行调整
// 复制ul下的第一个li放到最后
//复制ul下的最后一个li放到最前
copyEle();
function copyEle(){
    //1. 复制两个元素
    let first = imgs[0].cloneNode(true);
    let last = img_box.lastElementChild.cloneNode(true);
    //2. 将复制的元素添加到img_box中
    img_box.appendChild(first);
    img_box.insertBefore(last,img_box.firstElementChild);
    //3. 根据li的个数，调整imgbox的宽度
    img_box.style.width = img_box.children.length * imgs[0].offsetWidth + 'px';
}

function sportEnd(){
    //判断当前是最后一张的运动-结束
    if(index === img_box.children.length - 1){
        index = 1;
        img_box.style.left = - index * imgs[0].offsetWidth + 'px';
    }
    //判断当前是假的最后一张的运动结束为0那一张
    if(index === 0){
        index = img_box.children.length - 2;
        img_box.style.left = - index * imgs[0].offsetWidth + 'px';
    }
    //一张图片运动结束了，可以继续下一个图片的运动
    flag = true;
}
//添加事件
lt_btn.onclick = function(){
    if(flag === false){ return;}
    flag = false;
    index --;			
    sport(img_box,{left : -index * imgs[0].offsetWidth},sportEnd);	
}
rt_btn.onclick = function(){
    if(flag === false){  return; }
    flag = true;
    index ++;

    sport(img_box,{left : - index * imgs[0].offsetWidth},sportEnd);
}