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

最新推荐文章于 2022-11-30 00:13:36 发布

原创最新推荐文章于 2022-11-30 00:13:36 发布 · 497 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用HTML、CSS及JavaScript实现轮播图效果。通过设置图片显示隐藏属性结合按钮点击事件，实现了图片的自动切换功能。文章还分享了轮播图的实现思路和技术细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习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