事件委托实现轮播图

最新推荐文章于 2024-08-20 15:49:45 发布

HAI6545

最新推荐文章于 2024-08-20 15:49:45 发布

阅读量118

点赞数 1

分类专栏： JavaScript案例文章标签： css html css3

本文链接：https://blog.csdn.net/HAI6545/article/details/122198808

版权

JavaScript案例专栏收录该内容

105 篇文章 3 订阅

订阅专栏

本文介绍如何使用HTML、CSS和JavaScript构建一个响应式的图片轮播组件，包括使用`

`进行导航，以及鼠标悬停和点击事件的处理。通过CSS动画和事件委托，实现无缝切换和小圆点指示器的动态控制。

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


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style> 
.carousel{
    width: 600px;
    height: 300px;
    border:1px solid #000;
    margin:50px auto;
    position: relative;
}
.carousel ul, .carousel ol{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.carousel ul li{
    display:none;
}
.carousel ul li.active{
    display: block;
}
.carousel ul li a img{
    width: 600px;
    height: 300px;
}
.carousel ol{
    height: 20px;
    background-color: rgba(255,255,255,.7);
    border-radius:10px;
    position:absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
}
.carousel ol li{
    width: 10px;
    height: 10px;
    background-color: #000;
    float:left;
    border-radius:50%;
    margin:5px;
}
.carousel ol li.active{
    background-color: #f00;
}
.carousel span{
    width: 20px;
    height: 40px;
    background-color: rgba(0,0,0,.7);
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    text-align: center;
    line-height: 40px;
    color:#fff;
}
.carousel span.leftBtn{
    left: 0;
}
.carousel span.rightBtn{
    right: 0;
}
.carousel:hover{
    cursor: pointer;
}
</style>
<body>
<div class="carousel">
    <ul>
        
    </ul>
    <ol>
        
    </ol>
    <span class="leftBtn">&lt;</span>
    <span class="rightBtn">&gt;</span>
</div>
</body>
<script>
// 动态渲染结构
var arr = ['./img/1.webp','./img/2.webp','./img/3.webp','./img/4.webp','./img/5.webp']
// 获取ul
var ul = document.querySelector('.carousel ul');
var ol = document.querySelector('.carousel ol');
// 遍历数组
arr.forEach(function(v, index){
    // 创建li
    var li = document.createElement('li')
    // 将li放到ul中
    ul.appendChild(li)
    // li中放a标签和图片标签
    li.innerHTML = '<a href=""><img src="'+v+'" /></a>'
    // 创建ol下的li
    var oli = document.createElement('li')
    // 第一个添加active
    if(index === 0){
        li.className = oli.className = 'active'
    }
    ol.appendChild(oli)
})

// 获取大盒子
var carousel = document.querySelector('.carousel');
var index = 0
carousel.onclick = function(){
    // 获取精准的目标元素
    var target = window.event.target;
    // 判断这是哪个标签
    if(target.className === 'rightBtn'){
        index++
        if(index === ul.children.length){
            index = 0
        }
        // 让所有的li都去掉active
        for(var i=0;i<ul.children.length;i++){
            ul.children[i].className = ol.children[i].className = ''
        }
        ul.children[index].className = ol.children[index].className = 'active'
    }else if(target.className === 'leftBtn'){
        index--
        if(index < 0){
            index = ul.children.length - 1
        }
        // 让所有的li都去掉active
        for(var i=0;i<ul.children.length;i++){
            ul.children[i].className = ol.children[i].className = ''
        }
        ul.children[index].className = ol.children[index].className = 'active'
    }else if(target.parentElement.tagName === 'OL'){
        // 将当前小圆点的下标获取到
        // 先获取到一个有下标的集合
        // 遍历ol中的所有li
        for(var i=0;i<ol.children.length;i++){
            // 判断其中的li跟target是否是同一个标签
            if(ol.children[i] === target){
                // 赋值给index
                index = i
                break;
            }
        }
        // 根据index决定li的显示隐藏
        // 让所有的li都去掉active
        for(var i=0;i<ul.children.length;i++){
            ul.children[i].className = ol.children[i].className = ''
        }
        ul.children[index].className = ol.children[index].className = 'active'
    }
}
var timerId
timerId = setInterval(function(){
    index++
    if(index === ul.children.length){
        index = 0
    }
    // 让所有的li都去掉active
    for(var i=0;i<ul.children.length;i++){
        ul.children[i].className = ol.children[i].className = ''
    }
    ul.children[index].className = ol.children[index].className = 'active'
}, 1000)
carousel.onmouseout = function(){
    timerId = setInterval(function(){
        index++
        if(index === ul.children.length){
            index = 0
        }
        // 让所有的li都去掉active
        for(var i=0;i<ul.children.length;i++){
            ul.children[i].className = ol.children[i].className = ''
        }
        ul.children[index].className = ol.children[index].className = 'active'
    }, 1000)
}
carousel.onmouseover = function(){
    clearInterval(timerId)
}
// 事件委托的好处：
// 1.多次绑定只需要一次绑定 - 提高绑定性能
// 2.动态添加的子元素也能具备事件

// 事件委托原理：事件冒泡
</script>
</html>

HAI6545

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件委托实现轮播图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style> .carousel{ width: 600px; height: 300px; border:1px solid #000; margin:50px aut..
复制链接

扫一扫