美文网首页
广告轮播

广告轮播

作者: 9527神经 | 来源:发表于2018-12-12 19:12 被阅读0次
    <style type="text/css">
                *{
                    margin: 0;
                    padding: 0;
                }
                
                #bigImg{
                    width: 500px;
                    height: 300px;
                }
                
            </style>
        </head>
        <body>
            <div id="smallBox">
            </div>
            <div id="bigBox">
                <img id="bigImg"/>
            </div>
            
            <script type="text/javascript">
                //0.获取节点
                var smallBoxNode = document.getElementById('smallBox');
                var bigBoxNode = document.getElementById('bigBox');
                var bigImgNode = document.getElementById('bigImg');
                
                //1.获取数据源
                var imgArray = [
                    {
                        name:'图一',
                        small_url:'img/thumb-1.jpg',
                        big_url:'img/picture-1.jpg'
                    },
                    {
                        name:'图二',
                        small_url:'img/thumb-2.jpg',
                        big_url:'img/picture-2.jpg'
                    },
                    {
                        name:'图三',
                        small_url:'img/thumb-3.jpg',
                        big_url:'img/picture-3.jpg'
                    }
                ];
                //2.将数据展示在浏览器相应的位置
                var currentSmallNode = null
                for(var x in imgArray){
                    //根据小图创建节点
                    var imgObj = imgArray[x];
                    var smallImgNode = document.createElement('img');
                    if(x == 0){
                        smallImgNode.style.borderBottom = '1px solid red';
                        currentSmallNode = smallImgNode;
                        currentSmallNode.index = 0;
                    }
                    smallImgNode.src = imgObj.small_url;
                    //在节点对象中保存和节点相关的信息
                    smallImgNode.info1 = imgObj;
                    //添加节点
                    smallBoxNode.appendChild(smallImgNode);
                    //绑定事件
                    smallImgNode.onclick = function(){
    //                  console.log(this.info1)
                        bigImgNode.src = this.info1.big_url;
                        //将之前选中的下边框去掉
                        currentSmallNode.style.border = 'none';
                        //选中谁就给谁加下边框
                        this.style.borderBottom = '1px solid red';
                        //更新当前节点的值
                        currentSmallNode = this;
                    }
                }
                
                //3.大图默认显示
                bigImgNode.src = imgArray[0].big_url;
                
    //          var index = 0;
                //4.定时事件
                var inter1 = window.setInterval(function(){
                    var index = currentSmallNode.index;
                    var SmallImgNodeArray = smallBoxNode.children
                    index ++;
                    if(index == SmallImgNodeArray.length){
                        index = 0;
                    }
                    var smallImgNode = SmallImgNodeArray[index];
                    bigImgNode.src = smallImgNode.info1.big_url;
                    currentSmallNode.style.border = 'none';
                    smallImgNode.style.borderBottom = '1px solid red';
                    currentSmallNode = smallImgNode;
                    currentSmallNode.index = index;
                }, 2000);
                
            </script>
            ```

    相关文章

      网友评论

          本文标题:广告轮播

          本文链接:https://www.haomeiwen.com/subject/zxwphqtx.html