js轮播图（自动播+点击播放）

小小地鼠

于 2021-02-21 10:34:10 发布

阅读量1.2k

点赞数

分类专栏： js js轮播图文章标签： js javascript

本文链接：https://blog.youkuaiyun.com/qq_47664976/article/details/113914785

版权

本文介绍如何使用js实现一个具备自动播放和点击切换功能的轮播图，详细阐述其实现思路，并给出代码示例。

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

js轮播图（自动播+点击播放）

今天介绍一下js轮播图的实现思路。废话不多说直接上代码。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 *{margin:0;
 padding:0;
 list-style:none;}

 .wrap{
height:300px;
 width:600px;
 margin:60px auto;
 overflow: hidden;
 position: relative;
 margin:100px auto;
}
/* 图片框 */
/* ol 定义有序列表
   ul 定义无序列表
   li 定义列表项 */
 .wrap ul{
    position:absolute;
   } 
 .wrap ul li{
    height:300px;
    background-color: #E97305;
   }
   
 .wrap ol{
position:absolute;
 right:5px;
 bottom:10px;
}
 .wrap ol li{
 height:20px; 
 width: 20px;
 background:#ccc;
 border:solid 1px #666;
 margin-left:5px;
 color:#000;
 float:left;
 line-height:center;
 text-align:center;
 cursor:pointer;
}
 .wrap ol .on{
 background:#E97305;
 color:#fff;
} 
 </style>
 <script type="text/javascript">
 window.onload=function(){
 var

最低0.47元/天解锁文章