JavaScript实现轮播图片完整代码

(编辑：jimmy 日期: 2024/5/9 浏览：3 次 )

本文实例为大家分享了JavaScript实现轮播图片的具体代码，供大家参考，具体内容如下

JS代码注释清晰明了，一看就懂！

<!DOCTYPE html>
<html lang="en">

 <head>
 <meta charset="UTF-8">
 <title>最简单的轮播效果</title>
 <style>
 * {
 margin: 0;
 padding: 0
 }
 
 .box {
 width: 500px;
 height: 300px;
 border: 1px solid #ccc;
 margin: 100px auto;
 padding: 5px;
 }
 
 .inner {
 width: 500px;
 height: 300px;
 position: relative;
 overflow: hidden;
 }
 
 .inner img {
 width: 500px;
 height: 300px;
 vertical-align: top
 }
 
 ul {
 width: 1000%;
 position: absolute;
 list-style: none;
 left: 0;
 top: 0;
 }
 
 .inner li {
 float: left;
 }
 
 ol {
 position: absolute;
 height: 20px;
 right: 20px;
 bottom: 20px;
 text-align: center;
 padding: 5px;
 }
 
 ol li {
 display: inline-block;
 width: 20px;
 height: 20px;
 line-height: 20px;
 background-color: #fff;
 margin: 5px;
 cursor: pointer;
 }
 
 ol .current {
 background-color: red;
 }
 </style>
 </head>

 <body>
 <div class="box" id="box">
 <div class="inner">
 <!--轮播图-->
 <ul>
  <li>
  <div><img src="/UploadFiles/2021-04-02/001.png">

精彩专题分享：jQuery图片轮播 JavaScript图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：原生JS实现萤火虫效果
下一篇：JS实现瀑布流效果