原生js实现轮播图

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

智慧秃头少女

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

阅读量189

点赞数

分类专栏：笔记文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/Yangye_1018/article/details/125264521

版权

实现以下效果：1.定时实现图片轮播；2.点击下方小按钮，展示相应图片；3.点击侧方按钮，实现上一张图片、下一张图片展示；具体效果图如下：

摘要由CSDN通过智能技术生成

轮播图

实现以下效果：
1.定时实现图片轮播；
2.点击下方小按钮，展示相应图片；
3.点击侧方按钮，实现上一张图片、下一张图片展示；
具体效果图如下：
在这里插入图片描述代码如下：
代码每一部分都有注释，请慢慢食用。

<style>
  *{
   
    margin: 0;
    padding: 0;
  }
  .slid{
   
    position: relative;
    width: 600px;
    height: 400px;
    margin: 100px auto;
    border: 1px solid pink;
  }
  .slid li{
   
    position: absolute;
    list-style: none;
    display: none;
  }
  .slid p{
   
    position: absolute;
    left: 100px;
    bottom: 20px;
  }
  .slid p span{
   
    float: left;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-left: 15px;
    background: #999;
  }
  .slid p .cur{
   
    background: white;
    box-shadow: 0 0 5px 5px pink;
  }
  .slid #pro{
   
    position: absolute;
    left: 0;
    top:50%;
    cursor: pointer;
    border-radius: 0 50% 50% 0;
    background: rgb(0, 0, 0, .3);
    padding: 10px;
    color: white;
  }
  .slid #pro:hover{
   
    background: rgb(0, 0, 0, .6);
  }
  .slid #next{
   
    position: absolute;
    right: 0;
    top:50%;
    cursor: pointer;
    border-radius: 50% 0 0 50%;
    background: rgb(0, 0, 0, .3);
    padding: 10px;
    color: white