原生html/css+js写轮播

最新推荐文章于 2022-11-03 22:56:58 发布

@~~涛

最新推荐文章于 2022-11-03 22:56:58 发布

阅读量359

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_45899022/article/details/109218895

版权

JavaScript 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

效果视频：

20201022-115002

完整的html/css和js如下，新建.css和.html和.js文件后把对应的代码复制粘贴到对应文件中，双击.html文件即可看到效果（如果图片无法打开可以修改js中存储图片的list数组）
在这里插入图片描述

html:

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

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" href="./index.css">
    <title>轮播</title>
</head>

<body>
    <div id="app">

    </div>
    <script src="./index.js">
    </script>
</body>

</html>

css:

.box {
    width: 1200px;
    height: 200px;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}

.carousel-ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.carousel-ul li.show-pointer {
    cursor: pointer;
}

.carousel-ul li img {
    display: block;
    width: 1200px;
    height: 200px;
}


/* 轮播指示器 */

.carousel-indicators-ul {
    position: absolute;
    bottom: 5px;
    left: 50%;
}

.carousel-indicators-ul li {
    width: 38px;
    height: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0.5;
}

.carousel-indicators-ul li>div {
    width: 30px;
    height: 2px;
    background-color: #fff;
}

js:

// 广告
const announcement = (list) => {
    let lis = getLis(list)
    let indicators = getIndicators(list)
    let announcement = document.createElement("div")
    announcement.className = 'box'
    announcement.innerHTML = `
        <ul class="carousel-ul">
            ${lis}
        </ul>
        <ul  class="carousel-indicators-ul" style="marginLeft:-${38 * list.length / 2};display:${list.length > 1 ? 'flex' : 'none'}">
            ${indicators}
        </ul>
    `
    document.body.appendChild(announcement)
    list.length > 1 ? addCarouselEvent(list) : '';
    let carouselItems = document.getElementsByClassName("carousel-ul")[0].getElementsByTagName('li')
    for (let i = 0; i < carouselItems.length; i++) {
        carouselItems[i].addEventListener("click", () => {
            if (list[i].link) {
                window.open(list[i].link)
            }
        })
    }
}
const getLis = (list) => {
    let lis = ``
    for (let i = 0; i < list.length; i++) {
        lis += `
            <li class="${list[i].link?'show-pointer':''}">
                <img src="${list[i].imageUrl}" />
            </li>
        `
    }
    return lis
}
const getIndicators = (list) => {
    let lis = ''
    for (let i = 0; i < list.length; i++) {
        lis += `
            <li>
                <div></div>
            </li>
        `
    }
    return lis
}
const addCarouselEvent = (list) => {
    const carouselWidth = 1200
    let carouselUl = document.getElementsByClassName("carousel-ul")[0]
    let indicatorLis = list.length > 1 ? document.getElementsByClassName("carousel-indicators-ul")[0].getElementsByTagName("li") : ''
    let carouselLis = carouselUl.getElementsByTagName("li")
    let left = 0
    let timer = ''
    run()

    function run() {
        let time;
        if (left % carouselWidth == 0) {
            time = 3000
            let ind = left === 0 ? 0 : (-left / carouselWidth)
            ind = ind === indicatorLis.length ? 0 : ind
            for (let i = 0; i < indicatorLis.length; i++) {
                if (i === ind) {
                    indicatorLis[i].style.opacity = 1
                } else {
                    indicatorLis[i].style.opacity = 0.5
                }
            }
        } else {
            time = 10
        }
        let maxLeft = -(carouselWidth * list.length)
        if (left <= maxLeft) {
            left = 0
        }
        carouselUl.style.marginLeft = left + 'px'
        timer = setTimeout(() => {
            left -= 200
            run()
        }, time)
    }
    for (let i = 0; i < carouselLis.length; i++) {
        // 鼠标移入
        carouselLis[i].onmouseover = () => {
            clearTimeout(timer)
            left = -i * carouselWidth
            carouselUl.style.marginLeft = left + 'px'
        };
        // 鼠标移出
        carouselLis[i].onmouseout = () => {
            run()
        }
    }
    for (let j = 0; j < indicatorLis.length; j++) {
        indicatorLis[j].onmouseover = () => {
            clearTimeout(timer)
            left = -j * carouselWidth
            carouselUl.style.marginLeft = left + 'px'
            for (let k = 0; k < indicatorLis.length; k++) {
                indicatorLis[k].style.opacity = k === j ? 1 : 0.5
            }
        }
    }

}
let list = [
    { link: 'https://www.baidu.com', imageUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fdd30e55069adb64bb354d4f8d9f9b60.jpg?w=2452&h=920' },
    { link: 'https://www.baidu.com', imageUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/10aac533af4489c077bc6a8e15219e3b.jpg?thumb=1&w=1226&h=460&f=webp&q=90' }
]
announcement(list)

@~~涛

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
原生html/css+js写轮播

html:<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <
复制链接

扫一扫