轮播图制作（html&css&js）

最新推荐文章于 2024-06-17 15:29:34 发布

Mertrix_ITCH

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量5.3k

点赞数 11

文章标签： css html javascript 网页设计

本文链接：https://blog.csdn.net/mido94/article/details/111366179

版权

轮播图

效果展示

效果展示

轮播图

思维导图

轮播图

页面布局

/* Part1: html */

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>轮播图</title>
    <link rel="stylesheet" href="css/style.css">

</head>

<body>
    <div class="box">
        <ul id="imglist">
            <li><img src="images/1.jpg" alt=""></li>
            <li><img src="images/2.jpg" alt=""></li>
            <li><img src="images/3.jpg" alt=""></li>
            <li><img src="images/4.jpg" alt=""></li>
            <li><img src="images/5.jpg" alt=""></li>
        </ul>

        <ul id="btnlist">
            <li class="btn active">1</li>
            <li class="btn">2</li>
            <li class="btn">3</li>
            <li class="btn">4</li>
            <li class="btn">5</li>
        </ul>
    </div>
</body>
<script src="js/script.js"></script>

</html>

网页布局

/* Part1: css */

* {
    margin: 0px;
    padding: 0px;
}

img{
    width: 500px;
    height: 300px;
}

.box {
    height: 300px;
    width: 500px;
    margin: 100px auto;
    border: 3px black double;
    position: relative;
    left: 0px;
    overflow:hidden;
}

#imglist {
    width: 2500px; 
    height:300px;
    list-style: none;
    position: absolute;
    left: 0px; 
}

#imglist li {
    float: left;
}

#btnlist{
    width: 160px;
    left: 170px;
    top:275px;
    position:absolute;
    list-style: none;
}

#btnlist li{
    color: black;
    text-align: center;
    float: left;
    width: 20px;
    height: 20px;
    margin-left:10px;
    border-radius: 50%;
    background-color:rgba(0,0,0, 0.1);
}

逻辑实现

/* Part1: JavaScript */

var index = 0;
var imglist = document.getElementById('imglist');
var btnlist = document.getElementById('btnlist');
var arrbtn = btnlist.getElementsByTagName('li');

function btnchange(index) {
    for (var i = 0; i < 5; i++) {
        if (i == index) {
            arrbtn[i].style.backgroundColor = 'pink';
        }
        else {
            arrbtn[i].style.backgroundColor = 'rgba(0,0,0,0.2)';
        }
    }
}
for (var i = 0; i < 5; i++) {
    arrbtn[i].num = i;
    arrbtn[i].onmouseover = function () {
        index = this.num;
        imglist.style.left = index * (-500) + 'px';
        clearInterval(t);
        btnchange(index);
        this.onmouseout = function () {
            t = setInterval(imgchange, 2000);
        }
    }

}

function imgchange() {
    if (index == 4)
        index = -1;
    index++;
    imglist.style.left = index * (-500) + 'px';
    btnchange(index);
}
var t = setInterval(imgchange, 2000);

学无止境

欢迎浏览，评论🎄~

源码链接：https://download.csdn.net/download/MIDO94/13721931

Mertrix_ITCH

关注

11
点赞
踩
33

收藏

觉得还不错? 一键收藏
9
评论
轮播图制作（html&css&js）

轮播图效果展示思维导图页面布局网页布局逻辑实现学无止境效果展示思维导图页面布局/* Part1: html */<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content="">
复制链接

扫一扫