应用-广告轮播

作者: Dxes | 来源:发表于2019-12-11 00:07 被阅读0次

应用-广告轮播
Android无限轮播Banner的实现
iOS常见广告以及实现
iOS回顾笔记（05） -- 手把手教你封装一个广告轮播图框架
购物APP项目开发（3）——广告轮播
[iOS]定制性强的广告轮播图--SCAdView
仿广告轮播图，viewPager应用
微信小程序之自定义轮播图实例 —— 微信小程序实战系列（3）
广告
RunLoop应用(一)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            
            #box{
                text-align: center;
                position: relative;
                /*height: 430px;*/
            }
            
            #pointBox{
                height: 30px;
                width: 100%;
                /*background-color: sandybrown;*/
                
                position: absolute;
                bottom: 0;
            }
            
            #pointBox>font{
                color: rgb(193,193,193);
                margin-right: 20px;
                
                font-size: 20px;
                
                cursor: pointer;
            }
            
        </style>
    </head>
    <body>
        <div id="box">
            <img src='img/slide-1.jpg' id="img1"/>
            <div id="pointBox"></div>
        </div>
        
        <script type="text/javascript">
            var allImage = ['slide-1.jpg','slide-2.jpg','slide-3.jpg','slide-4.jpg'];
            var imageCount = allImage.length;
            var currentIndex = 0;
            var img1_ = document.getElementById('img1');
            var pointBox_ = document.getElementById('pointBox');
            var currentPointNode;
            
            //=============1.添加导航点===========
            (function(){
                for(var x in allImage){
                    var pointNode = document.createElement('font');
                    pointNode.innerText = '●';
                    pointNode.onmouseover = onPoint;
                    pointNode.onmouseout = leavePoint;
                    pointNode.num = x    //添加num属性保存当前节点的位置(第几个)
                    pointBox_.appendChild(pointNode);
                    if(x == currentIndex){
                        pointNode.style.color = 'rgb(40,165,154)'
                        currentPointNode = pointNode
                    }
                }
            })()
            
            function onPoint(){
                //停止定时器
                clearInterval(timer1)
                
                currentPointNode.style.color = 'rgb(193, 193, 193)'
                currentPointNode = this
                currentPointNode.style.color = 'rgb(40,165,154)'
                
                currentIndex = this.num
                var imageSrc =  'img/'+allImage[currentIndex]
                img1_.src = imageSrc
            }
            
            function leavePoint(){
                creatTimer()
            }
            
            
            //=============2.定时切换============
            function creatTimer(){
                timer1 = setInterval(function(){
                //1.让下标增加
                currentIndex ++;
                if(currentIndex == allImage.length){
                    currentIndex = 0;
                }
                
                //2.切换图片
                //获取当前图片地址
                var imageSrc = 'img/'+allImage[currentIndex];
                //修改图片
                img1_.src = imageSrc;
                
                //3.切换选中的点
                currentPointNode.style.color = 'rgb(193,193,193)'
                currentPointNode = pointBox_.children[currentIndex]
                currentPointNode.style.color = 'rgb(40,165,154)'
                
                },2000)
            }
            creatTimer()
            
            
            
            
        </script>
        
    </body>
</html>