原生js实现轮播图-淡入淡出效果

最新推荐文章于 2022-07-07 16:03:27 发布

洛希极限&

最新推荐文章于 2022-07-07 16:03:27 发布

阅读量531

点赞数 2

本文链接：https://blog.csdn.net/qq_43266440/article/details/102685463

版权

淡入淡出

<!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>轮播图</title>
    <style>
        #box{
            position: relative;
            width: 400px;
            height: 300px;
            border: 1px solid black;
            overflow: hidden;
        }
        #box div{
            position: absolute;
            left: 0;
            top:0;
            width: 100%;
            height: 100%;
        }
        #box div img{
            position: absolute;
            left: 0;
            top:0;
            width: 100%;
            height: 100%;
            opacity: 0;
        }
        #box div img:nth-child(1){
            opacity:1;
        }
        #box ul{
            list-style: none;
            position: absolute;
            left: 50px;
            top: 250px;
            width: 100%;
            height: 100%;
        }
        #box ul li{
            float: left;
            margin-left: 20px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: pink;
        }
        #box ul li:nth-child(1){
            background-color:red;
        }
    </style>
</head>
<body>
    <div id="box">
        <div>
            <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="">
        </div>
        <ul>
            <li> </li>
            <li> </li>
            <li> </li>
            <li> </li>
            <li> </li>
        </ul>
    </div>
</body>
</html>
<script src="js/mover.js"></script>
<script>

//定时器
let myTimer = null;
//当前图片的下标
let currIndex = 0;
let imgDoms = document.getElementById("box").firstElementChild.children;
let liDoms = document.getElementById("box").lastElementChild.children;
    
//自动播放
function autoPlay(){
    myTimer =  setInterval(()=>{
        goImg(currIndex+1);
    },2000);
}

//停止
function stopPlay(){
    clearInterval(myTimer);
}

//跳转到指定的图片
function goImg(index){
    //一、处理数据
        //1、计算数据
        //outIndex：离开图片的下标
        let outIndex = currIndex;
        currIndex = index;
        //2、边界处理
        if(currIndex>4){
            currIndex = 0;
        }

        //二、处理外观
        //改变图片
        fadeInOut(imgDoms[outIndex],imgDoms[currIndex],1000);
        //改变豆豆
        liDoms[outIndex].style.backgroundColor = "pink";
        liDoms[currIndex].style.backgroundColor = "red";
}

window.onload = function(){
    autoPlay();
    document.getElementById("box").onmouseover = function(){
        stopPlay();
    }

    document.getElementById("box").onmouseout = function(){
        autoPlay();
    }

    for(let i=0;i<liDoms.length;i++){
        liDoms[i].onclick = function(){
            goImg(i);
        }
    }
}


</script>

mover.js


//滑入滑出（花多长时间，让某个元素出，某个元素进）
//参数:
// outDom：出去的dom
// inDom:进来的dom
// endLeft：终点
// timeLong:时长
//返回值：无

function slide(outDom,inDom,endLeft,timeLong){
    //计算时间 间隔 和 步长
    // 已知  总时长  总距离，
    //希望平滑一些，频率就高一些，时间间隔就短一些
    let timerSpace = 5;
    let step = outDom.offsetWidth/(timeLong/timerSpace);  // 400/步数

    let currLeft = 0;
    let myTimer = setInterval(()=>{
        //一、处理数据
        //1、计算
        currLeft = currLeft-step;
        //2、边界处理
        if(currLeft<endLeft){
            currLeft = endLeft;
            clearInterval(myTimer);
        }
        //二、改变外观
        outDom.style.left = currLeft+"px";
        inDom.style.left = currLeft+outDom.offsetWidth +"px";
    },timerSpace);

}

//淡入淡出（花多长时间，让某个元素出，某个元素进）
//参数:
// outDom：出去的dom
// inDom:进来的dom
// timeLong:时长
//返回值：无

function fadeInOut(outDom,inDom,timeLong){
    //计算时间 间隔 和 步长
    // 已知  总时长  总距离，
    //希望平滑一下，频率就高一些，时间间隔就短一些
    let timerSpace = 5;
    let step = 1/(timeLong/timerSpace); 

    let currOpacity = 0;
    let myTimer = setInterval(()=>{
        //一、处理数据
        //1、计算
        currOpacity = currOpacity+step;
        //2、边界处理
        if(currOpacity>1){
            currOpacity = 1;
            clearInterval(myTimer);
        }
        //二、改变外观
        outDom.style.opacity = 1-currOpacity;
        inDom.style.opacity = currOpacity;
    },timerSpace);

}

洛希极限&

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
原生js实现轮播图-淡入淡出效果

淡入淡出<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...
复制链接

扫一扫