javaScript+css+html——多张图片的上下翻页+开始暂停自动翻页

最新推荐文章于 2021-06-09 22:54:01 发布

十二Tel

最新推荐文章于 2021-06-09 22:54:01 发布

阅读量7k

点赞数

本文链接：https://blog.csdn.net/weixin_42426348/article/details/80667885

版权

该博客介绍了如何使用JavaScript、CSS和HTML创建一个具备上下翻页和开始暂停自动翻页功能的图片轮播效果。主要内容包括代码实现和展示。

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

主要是实现图片轮换的上一张、下一张功能，这里对样式不做多的设计。

主要效果如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片轮换（上、下）</title>
    <style type="text/css">
        #outer{
            width: 600px;
            margin: 50px auto;
            background: plum;
            padding: 10px;
            text-align: center;
        }
    </style>

    <script type="text/javascript">
        /*定义全局变量*/
        var index = 0;
        var img = ["../img/cy.png","../img/小清新花朵.jpg","../img/紫花.jpg"];
        var imgObject;
        
        window.onload = function () {/*当页面加载完成后再执行这部分js代