JS实现简单的轮播图

JS实现简单的轮播图

js用面向过程的方法实现简单的轮播图

先写好简单的html布局；
正常轮播图所要实现的功能有一下几个：
1.banner图的自动切换；
2.通过左右按钮来切换banner图；
3.通过banner图下方的小圆点来切换banner图；

然后在使用CSS对页面进行布局：



css样式因为时间问题，写的可能有点繁琐，给为小伙伴在阅读或者使用的时候可以自己精简一下。

因为在日常网页中，banner图通常都是用来展示某些高热度东西，对网页开发方来说他们是更倾向于访问者可以通过banner图来了解banner图中所展示的东西，所以我们需要将banner图写在超链接中。
因为本人是入门一个月，外加英语比较挫，所以ID名这些起的不是很好，初次写贴，请各位多多包涵。

JS代码：

主要思路：

1. 先将HTML中的每个元素获取到JS中，有的元素是通过ID获取的，有的元素是通过元素名获取的，通过ID获取的元素可以对元素直接进行调用，通过元素名获取的元素，我们得到的值他是一个数组，我们要通过数组的下标对他进行访问；
2. 我自己是通过元素ID加元素名来获取的，轮播图的功能实现是通过不断的来操作数组的index来实现的。也是初次尝试些Markdown这样的东西，描述的可能不是很清楚，如果有像我一样的初学者，有疑惑的地方可以找本人探讨，如果有小伙伴发现该文档中的错误，也可以告诉本人，不胜感激。

下来先看代码：

  function ById(id) {
        return document.getElementById(id);
    }
    let time=null;
    index=0;
    let oBn=ById("banner").getElementsByTagName("div");
    let oSp=ById("cycle").getElementsByTagName("span");
    let oMain=ById("main");
    let oPrev=ById("prev");
    let oNext=ById("next");
    function autoplay(){
        time=setInterval(function(){
            index++;
            if(index>=3){
                index=0;
            }
            changeImg();
        },3000)
    }
    function changeImg() {
        for(let i=0;i<oBn.length;i++){
            oBn[i].className="";
            oBn[i].style.display="none";
            oSp[i].className='';
        }
        oBn[index].style.display="block";
        oSp[index].className="active";
    }
    oMain.onmouseover=function(){
        clearInterval(time);
    }
    oMain.onmouseout=function(){
        autoplay();
        changeImg();
    }
    oNext.onclick=function(){
        index++;
        if(index>=3){
            index=0;
        }
        changeImg();
    }
    oPrev.onclick=function(){
        index--;
        if (index<0){
            index=2;
        }
        changeImg();
    }
    for(let i=0;i<3;i++){
        oSp[i].id=i;
        oSp[i].onclick=function () {
            index=this.id;
            changeImg();
        }
    }
    autoplay();
    changeImg();

天啦撸，才发现Markdown最常用的功能，原来可以直接放代码块，此处有一个贱贱的表情无法导入，原谅我是一个刚入门一个月的小白吧，嘿嘿。

js刚开始的function ById()是为了方便期间，将获取HTML元素的方法封装在一个函数里，这样每次在获取HTML元素的时候可以直接拿来调用，很方便；

 function autoplay(){
        time=setInterval(function(){
            index++;
            if(index>=3){
                index=0;
            }
            changeImg();
        },3000)
    }
上面为banner图每隔3s中切换一次的实现方法，用一个循环定时器来实现它；

    function changeImg() {
        for(let i=0;i<oBn.length;i++){
            oBn[i].className="";
            oBn[i].style.display="none";
            oSp[i].className='';
        }
        oBn[index].style.display="block";
        oSp[index].className="active";
    }
    因为要根据index来控制div的显示和隐藏的以及小圆点的颜色的，所以先通过遍历将div的所有类名的清空，当后面用到某种时间时，在给某个div给一个oBn[index].style.display="block"样式来显示该图片。
    后面就不一一分析了。
 

马上凌晨一点了，就不写下去了，明天还要上课，如果明天有时间，我会把用面向对象的方法来实现轮播图的方法也写在下面，有需要的小伙伴可以看一看。我也是一个刚入门一个月的小白，如果有那位小伙伴发现代码的问题或者别的问题，可以给我指出，万分感谢。