JavaScript实现自动轮播图

最新推荐文章于 2023-09-21 22:55:09 发布

原创

最新推荐文章于 2023-09-21 22:55:09 发布 · 1.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #css

本文详细介绍了如何使用原生JavaScript实现一个自动轮播图功能，包括在HTML中添加结构，CSS设置样式，以及JavaScript代码的具体实现。通过控制两个索引来实现图片的切换效果，同时在图片下方添加了索引，点击索引可以显示对应图片。文章还涵盖了事件委托、索引计算、图片移动逻辑以及自动轮播和鼠标悬停时的交互处理。

轮播图有多种形态，本篇用原生js实现自动轮播图，并且在图片下方加一行索引，实现点击索引出现对应的图片
css代码如下：

.box{
   
   width: 1000px;height: 300px;margin: 20px auto;position: relative;overflow: hidden;}
.box .imgbox{
   
   }
.imgbox a{
   
   width: 1000px;height: 300px;position: absolute;left:1000px;top:0;}
.imgbox a:nth-child(1){
   
   left:0;}
.imgbox img{
   
   width: 1000px;height: 300px;}
.btns input{
   
   width: 40px;height: 40px;position: absolute;top:130px;border: none;background: rgba(200,200,200,0.5);}
#left{
   
   left:0;}
#right{
   
   right: 0;}
.list{
   
   width: 1000px;height: 30px;position: absolute;left: 0;bottom: 0;display: flex;background: rgba(200,200,200,0.5);}
.list span{
   
   flex: 1;line-height: 30px;text-align: center;border-left:solid 1px black;border-right: solid 1px black;}
.list span.active{
   
   background: red;color: #fff;}

HTML代码如下：

<div class="box">
    <div class="imgbox">
        <a><img src="../img/banner1.jpg" alt=""></a>
        <a><img src="../img/banner2.jpg" alt=""></a>
        <a><img src=