用JS制作轮播图_js 竖向轮播图-CSDN博客

本文链接：https://blog.csdn.net/qq_41672008/article/details/86700325

这篇博客介绍了如何使用JavaScript来制作轮播图的动画效果，包括HTML和CSS的布局设置，以及JavaScript代码的实现，包括图片切换、导航按钮的功能和自动轮播的逻辑。

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

运用JS制作轮播图的动画效果，代码如下：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           *{
               margin: 0;
               padding: 0;
           }

           /* 设置outer的样式 */
           #outer{
               width: 520px;
               height: 300px;
               /* 居中 */
               margin: 50px auto;/* 这里100px指的就是往下移动100px */
               background-color: greenyellow;
               /* 设置padding */
               padding: 10px 0;
               position: relative;/* 开启相对定位 */
               /* 剪掉溢出的内容 */
               overflow: hidden;

           }
           /* 设置imglist */
           #imgList{
               /* 去除项目符号，就是去除前面的小点*/
               list-style: none;
               /* 设置ul的宽度 */
               /* width: 1560px; */
               /* 开启绝对定位 */
               position: absolute;
               /* 每移动520像素就会显示下一张图片 */
               left: 0;
           }
           #imgList li{
               /* li肯定是竖着排列的 */
               /* 设置图片中的li向左浮动，让li横着排列 */
               float: left;
               /* 设置左右外边距 */
               margin: 0 10px;/* 上下为0，左右为10px */
           }