JavaScript图片轮播器

先贴上html的代码

<div class="ImgDiv">
                <div class="Imgs" id="imgScroll">
                    <ul id="imgUl" class="imgul">
                        <li><a href="#"><img src="img/1.jpg"/></a></li>
                        <li><a href="#"><img src="img/2.jpg"/></a></li>
                        <li><a href="#"><img src="img/3.jpg"/></a></li>
                        <li><a href="#"><img src="img/4.jpg"/></a></li>
                        <li><a href="#"><img src="img/5.jpg"/></a></li>
                    </ul>
                    <div class="lrbtn leftbtn" id="prevBtn"></div>
                    <div class="lrbtn rightbtn" id="nextBtn"></div>
                    <ul id="numBtn" class="nums"></ul>
                </div>

1、这个图片轮播器包括了图片、左右按钮以及数字按钮

2、数字按钮的个数是根据图片的数量自动生成的

接下来，在css里面对图片轮播器的样式进行处理。

最后，js中的主要代码如下：

1、控制图片想做滑动

imgUl.getElementsByTagName("li")[Inum].style.display = "none";
        numBtn.getElementsByTagName("li")[Inum].className = "";
        if (Inum == size - 1) {
            Inum = -1;
        }
        Inum++;
        imgUl.getElementsByTagName("li")[Inum].style.display = "block";
        numBtn.getElementsByTagName("li")[Inum].className = "active";

2、控制图片向右滑动

imgUl.getElementsByTagName("li")[Inum].style.display = "none";
        numBtn.getElementsByTagName("li")[Inum].className = "";
        if (Inum == 0) {
            Inum = size;
        }
        Inum--;
        imgUl.getElementsByTagName("li")[Inum].style.display = "block";
        numBtn.getElementsByTagName("li")[Inum].className = "active";

其中，向左滑动和向右滑动需要判断位置，当达到最大时，要把位置置为-1，当达到最小值时，要把位置置为最大。

3、数字右按钮，当点击到一个新的位置时，要记得把：Inum = this.index;

以上就是js图片轮播器的制作过程和核心代码~~还有需要改进的地方，大家一起学习哈……

JavaScript图片轮播器

推荐阅读