轮播图（1）

最新推荐文章于 2022-11-04 09:23:03 发布

贰拾壹先生

最新推荐文章于 2022-11-04 09:23:03 发布

阅读量170

点赞数

分类专栏： Web前端文章标签： js css 轮播图旋转木马

本文链接：https://blog.csdn.net/zheng18237111686/article/details/114678906

版权

JS轮播图汇总

轮播（一）

1，需求

最近在写官网，里面有不同的轮播图要实现，包括旋转木马，这也是考验前端JS和CSS的基本功，也参考了网上很多其他人的写法，感觉各有千秋，再此，记录一下这段旅程，也方便一下其他有需要的同学，

2，原理

（1）定义个容器，里面放置五张以上的图片，设置position: absolute, 让所有的图片叠加，通过添加不同的样式，控制图片显示隐藏，默认第一张图片设置opactity=1, 也就是激活状态，其他的图片都是opactity=0,隐藏状态，然后通过点击事件，控制不同图片的现实隐藏。

下面的图片，我都用颜色代替

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页轮播</title>
</head>
<style type="text/css">
    * {
    
        margin: 0px;
        padding:0px;
    }
    .wrap {
    
        width: 800px;
        height: 400px;
        position: relative;
    }
    .list {
    
        width: 800px;
        height: 400px;
        list-style: none;
        position: relative;
        padding-left: 0px;
    }
    .item {
    
        position: absolute;
        width: 100%;
        height: 100%;
        color: white;
        font-size: 55px;
        opacity: 0;
        transition: all .8s;
    }
    .item:nth-child(1) {
    
        background-color:orchid
    }
    .item:nth-child(2) {
    
        background-color: red
    }
    .item:nth-child(3) {
    
        background-color: goldenrod;
    }
    .item:nth-child(4) {
    
        background-color: green;

最低0.47元/天解锁文章

贰拾壹先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图（1）

JS轮播图汇总轮播（一）1，需求最近在写官网，里面有不同的轮播图要实现，包括旋转木马，这也是考验前端JS和CSS的基本功，也参考了网上很多其他人的写法，感觉各有千秋，再此，记录一下这段旅程，也方便一下其他有需要的同学，2，原理（1）定义个容器，里面放置五张以上的图片，设置position: absolute, 让所有的图片叠加，通过添加不同的样式，控制图片显示隐藏，默认第一张图片设置opactity=1, 也就是激活状态，其他的图片都是opactity=0,隐藏状态，然
复制链接

扫一扫