banner手动切换效果

自动切换的还不会做。至于两边放一个按钮点击就上一张/下一张的相对简单，我用了两种办法来做这个效果。我的感觉就是学了js以后把简单的事情搞得更复杂了。洒泪~~洒泪~~~
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <style type="text/css">
      * {
          margin: 0;
          padding: 0;
      }
      /*banner star*/
    #banner {
        height: 620px;
        background: url(banner01.jpg) no-repeat top center;
        position: relative;
    }
    #banner div{
        position: absolute;
        bottom: 20px;
        left: 50%;
        margin-left: -74px;
    }
    #banner input {
        height: 15px;
        width: 15px;
        border-radius: 50%;
        border: 1px solid white;
        background: rgba(255, 255, 255, 0);
        cursor: pointer;
    }
  </style>

  <script>
        window.onload=function(){
            
            //****************************************************************
            //****************************************************************
            /*
             * 这是第一种方法。也是以前玩脚本的时候常用的手法。那时候还没开始学js连语法都是网上查的
             * 只是看到有人做这个。我就根据他的做法。跟我自己的想法结合了一下
             * 
             *///****************************************************************
            //****************************************************************
            //****************************************************************
            var n=1;
            var newBtn;
            var newbtn1;
            click(); //默认显示第一张，所以n=1，并且调用一次函数；
            function click(){
                var banner=document.getElementById('banner');
                for (var i=1;i<=4;i++ ){
                    newBtn=('btn'+i);//获取id的值
                    newbtn1=document.getElementById(newBtn);
                    newbtn1.style.background='rgba(255,255,255,0)';//全部透明度改为全透明
                    if (i==n){
                        newbtn1.style.background='rgba(255,255,255,1)';
                        banner.style.background='url(banner0'+i+'.jpg) no-repeat top center';
                    };
                };
            };
            btn1.onclick=function(){
                n=1;
                click();
            }
            btn2.onclick=function(){
                n=2;
                click();
            }
            btn3.onclick=function(){
                n=3;
                click();
            }
            btn4.onclick=function(){
                n=4;
                click();
            }
            
            //****************************************************************
            //****************************************************************
            /*
             * 这是第二种方法。刚学到了函数。今天没事干就回来改了一下
             * 
             *///****************************************************************
            //****************************************************************
            //****************************************************************
            var input=document.getElementsByTagName('input');
            var banner1=document.getElementById('banner');
            //默认选中1
            input[0].style.background='red';
            for(var i=0;i<input.length;i++){
                input[i].onclick=function(){    //给每个input添加点击事件
                    this.style.background='red';    //此时的this指的是点击的对象。点击谁this就是谁
                    /*
                     * 上面的效果是点击了谁谁的背景颜色就会变为红色
                     * 下面要把上一个点击对象的背景色设为空
                     * 
                     * 难点：
                     *     1.怎么找到上一个点击的对象
                     *           因为上一个对象是随机的。所以我们把this以外的都改一遍
                     *     2.怎么找到相应的对应的背景图片名字呢
                     * 
                     */
                    for(var j=0;j<input.length;j++){
                        if(input[j]!=input[this.id]){    //把未点击的btn背景改为空。那么不走这里的j就是点击的btn对应的下标值：j
                            input[j].style.background='';
                        }else{
                            //改变相应的banner图片
                            banner1.style.background='url(banner0'+(j+1)+'.jpg) no-repeat top center';
                        };
                    };
                };
            };
        };
  </script>
  <title>Document</title>
 </head>
 <body>
    <!--banner-->
    <div id="banner">
        <div>
            <input type="button" id="btn1" />
            <input type="button" id="btn2" />
            <input type="button" id="btn3" />
            <input type="button" id="btn4" />
        </div>
    </div>

 </body>
</html>
banner手动切换效果

猜你喜欢
