CSS部分代码:
<style>
*{padding: 0; margin: 0;}
.container{
width: 1130px;
height: 286px;
position: relative;
margin: 0 auto;
overflow: hidden;
}
.wrapper{
position: absolute;
}
.slide{
width: 1130px;
height: 286px;
float: left;
}
.slide img{
width: 1130px;
height: 286px;
}
.btn-left,.btn-right{
background-image: url(https://static.zcool.cn/git_z/z/widget/slider/images/svg/left_arrow.svg?v=2);
background-position:center;
width: 52px;
height: 52px;
position: absolute;
z-index: 999;
left: 0;
top: 117px;
}
.btn-right{
left: 100%;
margin-left: -52px;
background-image: url(https://static.zcool.cn/git_z/z/widget/slider/images/svg/right_arrow.svg?v=2);
}
</style>
HTML部分:
<div class="container">
<div class="wrapper">
<div class="slide"><img src="https://img.zcool.cn/community/01411e5e6edf67a801216518fc43b6.jpg@1380w" alt=""></div>
<div class="slide"><img src="https://img.zcool.cn/community/01e5bf5e6edfbfa801216518de51c1.jpg@1380w" alt=""></div>
<div class="slide"><img src="https://img.zcool.cn/community/01a0495e672ba6a801216518617f4d.png@1380w" alt=""></div>
</div>
<div class="btn-left"></div>
<div class="btn-right"></div>
</div>
JavaScript部分
<script>
//父容器,用来适配轮播图的宽
var wrapper = document.querySelector(".wrapper");
//图片
var sliders = wrapper.children;
//左边按钮
var btn_left_ele = document.querySelector(".btn-left");
//右边按钮
var btn_right_ele = document.querySelector(".btn-right");
// 下标
var index = 0;
function init(){
//复制第一张图层到最后,用来达到最后一张不会出现空白的效果
wrapper.appendChild(sliders[0].cloneNode(true));
//获取轮播图的宽,并设置容器的宽为轮播图的宽
wrapper.style.width = sliders.length * sliders[0].offsetWidth + "px";
}
function bindEvent(){
btn_left_ele.addEventListener("click" , function(){
if(index === 0){
//直接替换不需要动画;
// 切换到最后一张,这个切换是没有动画的
index = sliders.length - 1;
//定位每一张轮播图的位置
wrapper.style.left = -index *1130 + "px";
// 因为要显示的是倒数第二张,所以index--
index --;
}else{
index --;
}
//运行封装好的动画函数
animate( wrapper , -index * 1130 , "left" );
})
btn_right_ele.addEventListener("click" , function(){
if(index === sliders.length - 1){
//直接替换不需要动画;
// 切换到最后一张,这个切换是没有动画的
index = 0;
wrapper.style.left = 0 + "px";
// 因为要显示的是第二张,所以index++
index ++;
}else{
index ++;
}
//运行封装好的动画函数
animate( wrapper , -index * 1130 , "left" ,"swing");
})
}
init();
bindEvent();
//动画函数
function animate ( ele , target , attr , timerfunction = "swing" , speed ){
//判断数据获取一次元素当前的值
if( attr === "opacity" ){
var iNow = parseInt( getComputedStyle( ele )[ attr ] * 100 );
target = target * 100 ;
}else{
var iNow = parseInt( getComputedStyle( ele )[attr] );
}
if( timerfunction === "liner"){
//判断speed是否存在
speed = speed === undefined ? 5 : speed;
// 判定speed的正负;
speed = iNow < target ? Math.abs(speed) : -Math.abs(speed);
}
// 开启关闭定时器
clearInterval( ele.timer );
ele.timer = setInterval( function(){
if(timerfunction === "swing" ){
// 根据目标端求得运动的速度
speed = ( target -iNow ) / 10;
//速度取整,要查看速度是正数还是负数
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
}
// 判定终止条件
if( Math.abs(target - iNow) <= Math.abs(speed) ){
clearInterval(ele.timer);
if( attr === "opacity" ){
ele.style[attr] = target / 100;
}else{
ele.style[attr] = target + "px";
}
}else{
//元素运动
iNow += speed;
if( attr === "opacity" ){
ele.style[attr] = iNow /100 ;
}else{
ele.style[attr] = iNow + "px";
}
}
} , 30)
}
</script>
网友评论