原生js实现图片轮播特效

网络编程 2025/1/17 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

本文特意为原生js实现图片轮播特效代码做了下总结，分享给大家供大家参考，欢迎大家学习。

运行效果图：

具体代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>最简单的轮播广告</title>
  <style>
    body, div, ul, li {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style-type: none;
    }

    body {
      background: #000;
      text-align: center;
      font: 12px/20px Arial;
    }

    #box {
      position: relative;
      width: 492px;
      height: 172px;
      background: #fff;
      border-radius: 5px;
      border: 8px solid #fff;
      margin: 10px auto;
    }

    #box .list {
      position: relative;
      width: 490px;
      height: 170px;
      overflow: hidden;
      border: 1px solid #ccc;
    }

    #box .list li {
      position: absolute;
      top: 0;
      left: 0;
      width: 490px;
      height: 170px;
      opacity: 0;
      transition: opacity 0.5s linear
    }

    #box .list li.current {
      opacity: 1;
    }

    #box .count {
      position: absolute;
      right: 0;
      bottom: 5px;
    }

    #box .count li {
      color: #fff;
      float: left;
      width: 20px;
      height: 20px;
      cursor: pointer;
      margin-right: 5px;
      overflow: hidden;
      background: #F90;
      opacity: 0.7;
      border-radius: 20px;
    }

    #box .count li.current {
      color: #fff;
      opacity: 0.7;
      font-weight: 700;
      background: #f60
    }
  </style>
</head>
<body>
<div id="box">
  <ul class="list">
    <li class="current" style="opacity: 1;"><img src="/UploadFiles/2021-04-02/01.jpg">

希望本文所述对大家学习javascript程序设计有所帮助。

js,图片轮播

标签：

js,图片轮播

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

评论“原生js实现图片轮播特效”

暂无原生js实现图片轮播特效的评论...

更新日志

2025年01月17日

原生js实现图片轮播特效

js,图片轮播

javascript实现保留两位小数的多种方法

js表单中选择框值的获取及表单的序列化

评论“原生js实现图片轮播特效”

更新日志

友情链接