js的自动轮播和手动轮播

最新推荐文章于 2024-04-13 17:28:35 发布

beibei_niao

最新推荐文章于 2024-04-13 17:28:35 发布

阅读量162

点赞数

文章标签： js的轮播实现

本文链接：https://blog.csdn.net/beibei_niao/article/details/103645810

版权

该博客详细介绍了如何使用JavaScript来创建一个既能自动又能手动切换的轮播图，展示如何有效地显示并切换三张图片。

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

自动和手动轮播显示3张图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js创建轮播</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style: none;
        }
       #box{
           border:3px solid red;
           position: relative;
           top:200px;
           margin:auto;
           overflow: hidden;
           height:300px;
           width:980px;
       }
        #left,#right{
            width:40px;
            height:40px;
            background-color: #ff4332;
            border-radius: 20px;
            text-align: center;
            line-height: 40px;
            color:white;
            cursor: pointer;
            position: absolute;
            top:130px;
        }
        #left{
            float:left;
            left:0;
        }
        #right{
            float:right;
            right:0;
        }
        .myL