原生js实现轮播图的思路、代码及知识点！

最新推荐文章于 2024-06-17 15:29:34 发布

Unicorn-xueya.

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量3.6k

点赞数 7

本文链接：https://blog.csdn.net/xue_smail/article/details/89342821

版权

一、轮播图实现思路：
1、自动轮播：
（1）使所有的图片的层级为0，并且li的背景颜色设置为默认颜色；
（2）使当前下标的图片的层级为1，并且当前li的背景颜色设置为白色；
（3）时间函数每隔1秒执行一次。
2、手动轮播：点击小圆圈按钮，显示相应图片。
（1）使所有的图片的层级为0，并且li的背景颜色设置为默认颜色；
（2）当点击小圆点时使它相对应的图片显示并且当前li的背景颜色设置为白色；
3、鼠标移上、移开时的事件。
4、点击左右箭头，实现向前向后轮播图片。

二、代码部分：

css部分：
<style type="text/css">
*{
    margin:0;
    padding:0;
    list-style: none;
}
.bigbox{
    width:586px;
    height:469px;
    margin:0 auto;
    position:relative;
    overflow:hidden;
}
.img{
    width:586px;
    height:469px;
    position:absolute;
    top: 0;
    left:0;
}
.img a{
    width:586px;
    height:469px;
    position:absolute;
    top: 0;
    left:0;
}
.items{
    width:160px;
    height:16px;
/*    border:1px solid red;*/
    position:absolute;
    bottom:10px;
    left:220px;
}
.items .item{
    width:16px;
    height:16px;
    background:skyblue;
    border-radius: 50%;
    float: left;
    margin-right: 10px;
    text-align: center;
    line-height: 16px;
    cursor:pointer;
}
.button{
        width:586px;
        height:350px;
        position:absolute;
        top:50%;
        margin-top: -35px;
        z-index: 3;
    }
    .btn{
        width:50px;
        height:70px;
        background:rgba(0, 0, 0, 0.5);
        color:white;
        font-size: 36px;
        text-align: center;
        line-height: 70px;
    }
    .fr{
        float:right;
    }
    .fl{
        float:left;
    }
</style>

内容部分：
<body>
    <div class="bigbox">
        <div class="img">
            <a href="" style="z-index:1;background:skyblue"><img src="images/lunbo01.jpg" alt="" /></a>
            <a href=""><img src="images/lunbo03.jpg" alt="" /></a>
            <a href=""><img src="images/lunbo08.jpg" alt="" /></a>
            <a href=""><img src="images/lunbo05.jpg" alt="" /></a>
            <a href=""><img src="images/lunbo06.jpg" alt="" /></a>
            <a href=""><img src="images/lunbo08.jpg" alt="" /></a>
        </div>
        <ul class="items" style="z-index:99">
            <li class="item">1</li>
            <li class="item">2</li>
            <li class="item">3</li>
            <li class="item">4</li>
            <li class="item">5</li>
            <li class="item">6</li>
        </ul>
        <div class="button">
            <div class="btn fl" id="left">&lt;</div>
            <div class="btn fr" id="right">&gt;</div>
        </div>
    </div>
</body>

script部分：
<script type="text/javascript">
    var num = 0;    //获取当前图片的下标；
    var img = document.getElementsByClassName("img")[0].getElementsByTagName("a"); //获取图片；
    var li = document.getElementsByClassName("item");   //获取li数组元素；
    var mouse = document.getElementsByClassName("bigbox")[0]; //获取放图片的整个盒子；
       //自动轮播
    function ImgAuto(adress){ 
        for (var i = 0; i < img.length; i++) {
            img[i].style.zIndex = "0";  //使当前所有的图片的层级为0，并且li的背景颜色设置为默认颜色；
            li[i].style.background = "skyblue";
        };
        img[num].style.zIndex = "1"; //使当前下标的图片的层级为1，并且当前li的背景颜色设置为白色；
        li[num].style.background = "white";
        if (adress == "right") {
             num++;
             if (num >= img.length) {
                 num = 0;   //当num大于等于图片数组长度时，归零；
             };
        }else if(adress == "left"){
            num--;
            if(num < 0){
                num = img.length-1;
            }
        } 
    }
    var move = setInterval(function(){
        ImgAuto("right");
    },1000); //每隔1秒执行一次
    
	//手动轮播
    for (var i = 0; i < img.length; i++) {
        li[i].index = i;
        li[i].onclick = function(){
            for (var j = 0; j < img.length; j++) {
                img[j].style.zIndex = "0";
                li[j].style.background = "skyblue";
            };
            this.style.background = "white";
            img[this.index].style.zIndex = "1";
            num = this.index;
        }
    };
    
    mouse.onmouseover = function(){ //鼠标移上去的事件（停止自动轮播）
        clearInterval(move);
    }
    mouse.onmouseout = function(){ //鼠标移开事件（恢复自动轮播）
        move = setInterval(function(){
        ImgAuto("right")
        },1000);
    }

    left.onclick = function(){ //左边按钮事件；
        ImgAuto("left");
    }
    right.onclick = function(){ //右边按钮事件；
        ImgAuto("right"); 
    }
</script>

三、知识点。
1、获取DOM元素：
（1）document.getElementsById():通过id获取对象，id是唯一的，可以不获取。
（2）document.getElementsByClassName()：通过class属性获取对象。
（3）document.getElementsByTagName()：通过标签名获取对象。
（4）document.querySelectorAll():可通过所有获取。
2、(1)onmouseover():鼠标移上时事件；
(2)onmouseout():鼠标移开时事件；
3、onclick():单击事件。

Unicorn-xueya.

关注

7
点赞
踩
12

收藏

觉得还不错? 一键收藏
2
评论
原生js实现轮播图的思路、代码及知识点！

一、轮播图实现思路：1、自动轮播：（1）使所有的图片的层级为0，并且li的背景颜色设置为默认颜色；（2）使当前下标的图片的层级为1，并且当前li的背景颜色设置为白色；（3）时间函数每隔1秒执行一次。2、手动轮播：点击小圆圈按钮，显示相应图片。（1）使所有的图片的层级为0，并且li的背景颜色设置为默认颜色；（2）当点击小圆点时使它相对应的图片显示并且当前li的背景颜色设置为白色；3、...
复制链接

扫一扫