javascript基础(一)——轮播图

1、轮播图的实现原理

轮播图的js实现原理其实十分的简单，首先将图片放入一个ul标签中，ul标签的大小要足够将所有图片放入其中。然后再将ul标签放进div中，这个div的大小正好可以显示一整张图片，将其他图片使用 overflow:hidden属性来进行隐藏，之后用js代码来操纵ul标签的left属性值，实现图片的轮播。

轮播图的样式搭建

                                    * {                margin: 0;                padding: 0;            }            #lun {                width: 150px;                height: 80px;                background-color: #00B601;                border: 1px #0000FF solid;                overflow: hidden;                margin: 0 auto;                position: relative;/*子元素开启绝对定位，父元素一般开启相对定位*/            }            /*这里开启ul的绝对定位，为了对其的left属性进行修改*/            #img {                position: absolute;                /* left:  -155px; */            }            li {                list-style: none;                float: left;/*设置浮动，使得图片成一行*/                margin-right:5px;            }            img {                width: 150px;                height: 80px;            }            a{                text-decoration: none;                float: left;/*因为a标签是内联标签，将其设置浮动即可自动设置成块标签，即可设置大小*/                width: 5px;                height: 5px;                background-color: red;                opacity: 0.5;            }            a:hover{                background-color: gray;            }            #daohang {                position: absolute;                bottom: 5px;            }                        

接下来添加js代码来实现图片点击的时候进行切换，以及图片的自动切换。

• js编写过程，首先要获取ul和所有图片以及a标签，我们这里获取ul使用document.getElementById这个方法获取，图片和a标签我们则使用document.getElementsByTagName方法来获取。获取之后，我们为每一个a标签绑定onclick，使点击相应的链接，可以切换到相应的图片，切换的方式是通过改变ul的left值，第一张图片left值是0，将left值减去图片宽度，就可以切换到第二张图片了，其他图片的切换也是这样。将其写入onclick回调函数中，即可实现点击切换图片。

• 要想实现自动轮播，还需要添加定时器，js定时器是 setInterval,使用定时器，将图片切换的函数放入其中，每隔一定的时间调用，即可实现自动轮播。

• 但是这样的轮播没有动画效果，想要有动画效果，我们还需要在写一个定时器。这个定时器的作用就是将图片每次切换的过程放慢，使其有动画效果。

下面是具体的js代码

<script type="text/javascript">            window.onload = function(){                //设置图片                var img = document.getElementById("img");                var imgArr = document.getElementsByTagName("img");                img.style.width = 155 * imgArr.length + "px";                //设置导航条居中位置                var dao = document.getElementById("daohang");                var lun = document.getElementById("lun");                dao.style.left = (lun.offsetWidth - dao.offsetWidth)/2 + "px";                //点击超链接切换指定图片                var index = 0;                var aArr = document.getElementsByTagName("a");                //设置第一张选中颜色                aArr[index].style.backgroundColor = "gray";                for(var i = 0;i<aArr.length;i++){                    //添加标记，对象属性num                    aArr[i].num = i;                    aArr[i].onclick = function(){                        index = this.num;                        //img.style.left = (this.num * -155) +"px";                        move(img,"left",-155*index,10);                        //设置选中                        setA();                    }                }                //设置选中链接的颜色                function setA(){                    if(index >=imgArr.length-1){                        index = 0;                        img.style.left=0;                    }                    for(var i=0;i<aArr.length;i++){                        aArr[i].style.backgroundColor="";                        aArr[index].style.backgroundColor="gray";                    }                }                /* var timer = setInterval(function(){                setA();                img.style.left = (index * -155) +"px";                index++;                if(index >=aArr.length)                index = 0;                },3000); */                //该函数实现图片自动切换                autochange();                function autochange(){                     setInterval(function(){                        index++;                        index %=imgArr.length;                        move(img,"left",-155*index,10);                    },3000);                }                //该函数实现图片切换的动画效果                 /*                封装移动函数                参数：                    obj：执行动画的对象                    attr:要修改对象的属性名                    target：执行动画的目标位置                    speed：移动速度                 */                function move(obj , attr , target , speed){                    clearInterval(obj.timer);                    var current = parseInt(getstyle(obj,attr));                    if(current>target){                        speed = -speed;                    }                    obj.timer = setInterval(function(){                        var oldvaule = parseInt(getstyle(obj,attr));                        var newvaule = oldvaule + speed ;                        if(newvaule > target && speed>0 ||newvaule<target && speed<0)                        newvaule = target;                        obj.style[attr] = newvaule+"px";                        if(newvaule ==target){                            clearInterval(obj.timer);                            setA();                        }                    },30)                }                /*                 获取对象属性值的方法                 */                function getstyle(obj,name){                    return window.getComputedStyle?getComputedStyle(obj,null)[name]　:obj.currentStyle[name];                }            }        </script>

这是js基础教学视频，关于轮播图制作的网址 https://www.bilibili.com/video/BV1YW411T7GX/?p=134