js实现轮播图（简单滚动轮播)

最新推荐文章于 2023-02-23 16:24:52 发布

VIP文章学Java的小李

最新推荐文章于 2023-02-23 16:24:52 发布

阅读量3.7k

点赞数 9

分类专栏： js css html

本文链接：https://blog.csdn.net/qq_40072583/article/details/98208297

版权

原理：

在页面上有一个可视区域（a），用来显示图片，还有一个放所有需要轮播的图片的区域(b) ，当执行操作时，b需要移动，移动一个a的宽度，使下一张图片显示，

需要实现一下效果：

1.自动播放

2.左右按钮切换

3.下标圆点切换

在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
 <style>
     *{
         margin: 0;
         padding: 0;
         list-style: none;
     }
     .box{
         width: 1000px;
         height: 400px;
         border: 1px solid red;
         position: relative;
         margin: 0 auto;
         overflow: hidden;
     }
     .box .list{
         width: 5000px;
         height: 100%;
         border: 1px solid yellow;
         position: relative;
         transition: left 1.5s linear; /*过度时间，即变化时间为1.5s*/
     }
     .box .list li{
         width: 1000px;
         height: 400px;
         float: left;
     }
     .box .list li img{
        width: 1000px;
         height

最低0.47元/天解锁文章

学Java的小李

关注

9
点赞
踩
33

收藏

觉得还不错? 一键收藏
1
评论
js实现轮播图（简单滚动轮播)

原理：在页面上有一个可视区域（a），用来显示图片，还有一个放所有需要轮播的图片的区域(b) ，当执行操作时，b需要移动，移动一个a的宽度，使下一张图片显示，需要实现一下效果：1.自动播放2.左右按钮切换3.下标圆点切换代码：<!DOCTYPE html><html><head> <meta charset="utf-8" /...
复制链接

扫一扫