【javascript】手写轮播

最新推荐文章于 2022-08-12 10:31:18 发布

业火之理

最新推荐文章于 2022-08-12 10:31:18 发布

阅读量428

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/yehuozhili/article/details/88806018

版权

javascript 专栏收录该内容

78 篇文章 1 订阅

订阅专栏

手写轮播

简单实现轮播图
博主已解决bug，由于评论代码放不全，故进行原文修改。

主要思路

利用z轴和定时器，把图片叠一起后，用定时器轮流设置图片z轴产生效果。
渐变实现利用定时器加透明度实现。

产生BUG

轮播和渐变效果成功完成，但是在渐变完成新图片产生进行渐变时会有重影，在各种地方将透明度清零都无法解决此问题。

解决BUG

主要因为一开始使用了setInterval，这个函数如果在不知道什么时候运行完使用会很坑。多张图片调用这个函数导致setInterval并列运行，而且如果使用clearInterval会清除刚刚创建的定时器，除非每次调用的名字都不一样，但是如果循环完一轮，上一轮同样的计时器还在记时就坑爹了，所以最好使用setTimeout。然后在每次调用setTimeout递归时做一个出口，满足opacity超过1就不进行递归。这样就能完美解决问题了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css">
    <script src="main.js"></script>
</head>
<style>
    ul{
        list-style-type: none;
    }
    li{
        position: absolute;
        top:0;
        left:0;
    }
</style>
<body>
    <div id="d1">
        <ul>
            <li><img src="ss/1.jpg"></li>
            <li><img src="ss/2.jpg"></li>
            <li><img src="ss/3.jpg"></li>
            <li><img src="ss/4.jpg"></li>
        </ul>
    </div>
    <script>
 var objdiv = document.getElementById("d1");
        var objli = objdiv.getElementsByTagName("li");
        var num=1;
        var index=0;
        var fad=0;
        for(var i=0;i<4;i++){
            objli[i].style.opacity=0;
        }
        function fchange(obj,fad) {    
            setTimeout(function(){
                obj.style.opacity=fad;
                fad+=0.01;
                if(fad<1){
                    setTimeout(arguments.callee);
                }
            },20)}
        function ff(){
            console.log("11")
            
            objli[index].style.opacity=0;
            objli[index].style.zIndex=num;
            fchange(objli[index],fad);
            num++;
            index++;
            if(index>3){
                index=0;
            }        
            setTimeout(ff, 2000);
        }
        setTimeout(ff, 2000);
    </script>
</body>
</html>

业火之理

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
【javascript】手写轮播

手写轮播简单实现轮播图博主用自己思路进行试验，发现代码中仍存在Bug，后续解决后写到评论处。主要思路利用z轴和定时器，把图片叠一起后，用定时器轮流设置图片z轴产生效果。渐变实现利用定时器加透明度实现。产生BUG轮播和渐变效果成功完成，但是在渐变完成新图片产生进行渐变时会有重影，在各种地方将透明度清零都无法解决此问题。<!DOCTYPE html><h...
复制链接

扫一扫