HTML+CSS+JS练习设计05

最新推荐文章于 2024-08-23 10:53:05 发布

编程小菜鸡.

最新推荐文章于 2024-08-23 10:53:05 发布

阅读量123

点赞数 1

文章标签： html css javascript

本文链接：https://blog.csdn.net/m0_63384414/article/details/138181758

版权

本文介绍了作者在CSDN上实践的轮播图组件，通过HTML结构、CSS样式和JavaScript脚本实现图片的动态切换，用户可以通过左右按钮或列表项进行操作。代码中展示了图片选择、索引控制和鼠标事件处理。

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

个人练习，在csdn做记录。用自己学到知识实现，哪里需要更改或改善请在评论区多指教，谢谢！

练习组件：轮播图

效果视频：

轮播图

html内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="box">
        <img class="active1" src="./图1.jpg">
        <img src="./图2.jpg">
        <img src="./图3.jpg">
        <img src="./图4.jpg">
        <img src="./图5.jpg">

        <div class="left">&lt;</div>
        <div class="right">&gt;</div>

        <ul>
            <li class="active2" index="1"></li>
            <li index="2"></li>
            <li index="3"></li>
            <li index="4"></li>
            <li index="5"></li>
        </ul>
    </div>
    <script type="text/javascript" src="./index.js"></script>
</body>
</html>

css内容：

*{
    padding: 0;
    margin: 0;
}
ul{
    list-style: none;
}
.box{
    margin: auto;
    width: 700px;
    height: 500px;
    box-sizing: content-box;
    position: relative;
}
.box img{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.box div{
    width: 50px;
    height: 50px;
    position: absolute;
    color: aliceblue;
    top: 44%;
    text-align: center;
    line-height: 47px;
    font-size: 40px;
}
.left{
    left: 0;
}
.right{
    right: 0;
}
.box ul{
    width: 223px;
    height: 30px;
    position: absolute;
    display: flex;
    left: 24px;
    bottom: 0;
    list-style: none;
}
.box ul li{
    margin-right: 5px;
    width: 15px;
    height: 15px;
    background-color: white;
    border-radius: 50%;
}
.box div:hover {
    background-color: rgb(167, 223, 216);
}
.box ul li:hover{
    background-color: rgb(235, 68, 17);
}

.box img.active1{
    opacity: 1;
}
.box ul li.active2{
    background-color: rgb(235, 68, 17);
}

js内容：

var box = document.querySelector('.box')
var left = document.querySelector('.left')
var right = document.querySelector('.right')
var ulItem = document.querySelectorAll('.box ul li')
var index = 1
// console.log(document.querySelector('.box img:nth-child(' + index + ')'))

function setImg() {
    var imgItem = document.querySelector('.box img:nth-child(' + index + ')')
    var liItem = ulItem[index - 1]
    imgItem.classList.add('active1')
    liItem.classList.add('active2')
}

function delImg() {
    var imgItem = document.querySelector('.box img:nth-child(' + index + ')')
    var liItem = ulItem[index - 1]
    imgItem.classList.remove('active1')
    liItem.classList.remove('active2')
}

function judeIndex() {
    if(index > 5) {
        index = 1
    }
    if(index < 1) {
        index = 5
    }
}

function dynamic() {
    delImg()
    index += 1
    judeIndex()
    setImg()
}

var interval = setInterval(dynamic, 1000)

box.addEventListener('mouseenter', () => {
    console.log('停止')
    clearInterval(interval)
})

box.addEventListener('mouseleave', () => {
    console.log('重新启动')
    interval = setInterval(dynamic, 1000)
})



left.addEventListener('click', () => {
    delImg()
    index -= 1
    judeIndex()
    setImg()
})

right.addEventListener('click', () => {
    delImg()
    index += 1
    judeIndex()
    setImg()
})

ulItem.forEach((arr) => {
    arr.addEventListener('click', () => {
        delImg()
        index = parseInt(arr.getAttribute('index'))
        setImg()
    })
})