html js第二种轮播图的简单制作

最新推荐文章于 2023-12-04 20:00:00 发布

结城明日奈是我老婆

最新推荐文章于 2023-12-04 20:00:00 发布

阅读量3.2k

点赞数

分类专栏： html学习专栏文章标签： html javascript

本文链接：https://blog.csdn.net/yasinawolaopo/article/details/121502905

版权

html学习专栏专栏收录该内容

36 篇文章 0 订阅

订阅专栏

填写的方法在我B站视频里面:
这个视频，希望得到大家支持

先是html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>bilibili游戏区轮播图</title>
        <link rel="stylesheet" href="indexCss.css">
        <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
    </head>
    <body>
        <div>
            <ul class="images">
                <li class="img">
                    <a href="#">
                        <img src="图片" alt="">
                    </a>
                </li>
                <li class="img">
                    <a href="#">
                        <img src="图片" alt="">
                    </a>
                </li>
                <li class="img">
                    <a href="#">
                        <img src="图片" alt="">
                    </a>
                </li>
            </ul>
        </div>
    </body>
    <script src="indexJS.js"></script>
</html>

再是配置css:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}
.images{
    display: flex;
    position: relative;
    top: 20px;
    transition: 0.6s;
    justify-content: center;
    
}
.img img{
    padding: 5px;
    border-radius: 20px;
}

首先得到的效果就以bilibili游戏的一些图来打比方(这么菜的人怎么会找上们来的生意呢?绝不是收了别人钱进行宣传的)

在这里插入图片描述

用万能的:nth-child()(选择器是1开始时第一张图)来选择某张图进行个别编辑:

.img:nth-child(1){
    position: absolute;
    left: 300px;
    z-index: 999;
}
.img:nth-child(1) img{
}

.img:nth-child(2){
    position: absolute;
    left: 100px;/*位置可调*/
    top: 30px;
    /* z-index: 999; */
}
.img:nth-child(2) img{
    height: 250px;
    filter: brightness(50%);/*这个时能让图片暗下来,百分比越低越暗*/
} 

.img:nth-child(3){
    position: absolute;
    left: 700px;/*位置可调*/
    top: 30px;
}
.img:nth-child(3) img{
    height: 250px;
}

效果为:
在这里插入图片描述
第三张图也filter: brightness(50%);就可以了，为了调用给第一张图设置为filter: brightness(100%);。
这样布局就首先完成了

轮播图可以用我之前的用法,傻瓜式的一个一个添加(JS):
因为是傻瓜式所以我们就用id来做这样就比较好理解逻辑。

let YJZS = document.getElementById('YJZS');
let JDZJ = document.getElementById('JDZJ');
let GYYZL = document.getElementById('GYYZL');

setInterval(function(){
    setTimeout(function(){
        YJZS.style.transform = "translateX(-100px)";
        YJZS.style.height = "250px";
        YJZS.style.top = "30px";
        YJZS.style.filter = "brightness(50%)";
    },1000);
},1000);

在这里插入图片描述
我这里的循环逻辑出现了问题:就以一次的轮播为例:(作为大家参考)

假设中间高亮为第一张图，左侧为第二张图,最右侧为第三张图:
第三张图到第一张位置:

setInterval(function(){
    {
        setTimeout(function(){//i==2
            YJZS.style.transform = "translateX(-100px)";
            YJZS.style.height = "250px";
            YJZS.style.top = "30px";
            YJZS.style.filter = "brightness(50%)";
            YJZS.style.zIndex = "989";
        },2000);

        setTimeout(function(){
            JDZJ.style.transform = "translateX(400px)";
            JDZJ.style.height = "250px";
            JDZJ.style.zIndex = "989";
            },2000);
        setTimeout(function(){
            GYYZL.style.transform = "translateX(-300px)";
            GYYZL.style.height = "310px";
            GYYZL.style.top = "-30px";
            GYYZL.style.filter = "brightness(100%)";
            GYYZL.style.zIndex = "999";
        },2000);
	}
},2000);

第二张图到第一张图:

setInterval(function(){
    {
        setTimeout(function(){//i==2
            YJZS.style.transform = "translateX(300px)";
            YJZS.style.height = "250px";
            YJZS.style.top = "30px";
            YJZS.style.filter = "brightness(50%)";
            YJZS.style.zIndex = "989";
        },2000);

        setTimeout(function(){
            JDZJ.style.transform = "translateX(100px)";
            JDZJ.style.top = "-30px";
            JDZJ.style.height = "310px";
            JDZJ.style.filter = "brightness(100%)";
            JDZJ.style.zIndex = "999";
            },2000);
        setTimeout(function(){
            GYYZL.style.transform = "translateX(-400px)";
            GYYZL.style.height = "250px";
            GYYZL.style.top = "0px";
            GYYZL.style.filter = "brightness(50%)";
            GYYZL.style.zIndex = "989";
        },2000);
    }
},2000);