js轮播图代码_javascript基础（一）——轮播图

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;/*因为