【学习笔记】 初学JS写了个轮播图

  学习html和css一段时间了，写出来网页都是静态的，今天学习了JSDOM操作，像各大购物网站的轮播图能实现

功能了，网页终于有了动态效果。

 点击轮播图 的总体思路是

1.先把图片全部正确的放到网页上(比如放在ul的li标签中)。

 2.其中一个属性为display:block;其余的为display:none;

.banner_img li{    position:absolute;    top:0;    left: 0;    display: none;    z-index: 0;}.banner_img li.show{    display:block;}

 3.设置一个下标index，初值为0，banner_img[index]就是第index张图片，当鼠标触发点击事件时，把第index+1张图片的属性

    设置为display:block;（下标超过图片数量则index=0）;

right_point.onclick = function(){        _index++;        if (_index>6){            _index=0;        }        show_img(_index);    }

show_img函数为：

function show_img(index){        for(var i = 0;i<banner_imgs.length;i++){            banner_imgs[i].className = "";            banner_point[i].className = "";        }        banner_imgs[index].className ="show";        banner_point[index].className = "red_point";        show_background(index);    }

自动播放图片就设置一个不断执行设置display:block函数的循环;

//每隔2秒自动轮播图片    setInterval(function(){        _index++;        if (_index>6){            _index=0;        }        show_img(_index);    },5000);

  总体来说轮播图还是比较容易的，要注意获取到正确的元素以及标签。

  前端不停的调位置感觉有点烦，zzZ