JavaScript图片轮播器

时间：2024-12-07 10:03:56

先贴上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图片轮播器的制作过程和核心代码~~还有需要改进的地方，大家一起学习哈……

相关文章