多功能轮播图

最新推荐文章于 2024-10-02 15:35:50 发布

Sodapease

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量127

点赞数

文章标签： css javascript html

本文链接：https://blog.csdn.net/Sodapease/article/details/128648358

版权

该文章展示了如何使用JavaScript和jQuery实现一个多功能轮播图，包括鼠标悬停时停止轮播、显示箭头，鼠标离开时自动轮播，以及通过小圆点和箭头切换图片的功能。代码详细说明了各个部分的实现原理，如事件监听和DOM操作。

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

需求

鼠标不在图片上方时，进行自动轮播，并且左右箭头不会显示；当鼠标放在图片上方时，停止轮播，并且左右箭头会显示
图片切换之后，图片中下方的小圆点会同时进行切换，并且点击相应的小圆点可以切换到相应的图片上
点击左右箭头可以进行左右图片的切换
图片上需有介绍的文字，会随图片切换一起进行切换

实现原理

需求	实现原理
自动轮播，左右箭头不会显示	声明轮播图片和文字，设置轮播函数，将图片和文字导入数据中
自动轮播，左右箭头不会显示	使用jq hover实现鼠标移出隐藏
停止轮播，并且左右箭头会显示	设置监听鼠标移动事件，鼠标移入清除定时器
停止轮播，并且左右箭头会显示	使用jq hover实现鼠标移入显示
小圆点会同时进行切换，点击相应的小圆点可以切换到相应的图片	声明并获取全部 li 设置监听鼠标点击事件，同时调用轮播函数
点击左右箭头可以进行左右图片的切换	声明并获取左右箭头class名，对图片所在位置进行判断，再调用轮播函数

代码

<!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">
    <title>swiper</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul,ol{
        list-style: none;
    }
    body{
        background-color: #f0f0f0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .container{
        width: 100%;
        height: 400px;
        overflow: hidden;
    }
    .show{
        top: 25%;
        right: 35%;
        width: 540px;
        position: absolute;
        overflow: hidden;
        border-radius: 16px;
        z-index: 0;
        transition: all 0.45s ease-in-out;
        box-shadow: 0px 0px 15px #b0b0b0;
        color: #364c7b;
    }
    .show img{
        width: 100%;
        height: 100%;
        display: block;
    }
    .btn{
        display: flex;
        align-items: center;
        margin: auto;
        position: absolute;
        top: 60%;
        right: 48%;
    }
    .btn li{
        width: 8px;
        height: 8px;
        margin: 4px;
        border-radius: 50%;
        background: #b0b0b0;
        cursor: pointer;
    }
    .btn li.active{
        width: 18px;
        height: 9px;
        opacity: 1;
        border-radius: 20px !important;
        background: #364c7b;
    }
    .toggle{
        position: absolute;
        right: 0;
        top: 38%;
        display: flex;
        width: 100%;
        justify-content: space-around;
    }
    .toggle button{
        margin-right: 12px;
        width: 50px;
        height: 50px;
        appearance: none;
        border: none;
        background-color: rgba(0,0,0,.1);
        color: #fff;
        border-radius: 25px;
        cursor: pointer;
        position: relative;
        /* display: none; */
    }
    .toggle button.last i{
        position: absolute;
        display: block;
        background: url(./static/left.png);
        background-size: cover;
        width: 30px;
        height: 30px;
        top: 20%;
        left: 20%;
    }
    .toggle button.next i{
        position: absolute;
        display: block;
        background: url(./static/right.png);
        background-size: cover;
        width: 30px;
        height: 30px;
        top: 20%;
        left: 20%;
    }
</style>
<body>
    <div class="container">
        <div class="show"><span></span>&emsp;
            <img src="./static/Goose Goose Duck.jpg" alt="">
        </div>
        <div class="bottom">
            <ul class="btn">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="toggle">
            <button class="last"><i></i></button>
            <button class="next"><i></i></button>
        </div>
    </div>
        <script type="text/javascript" src="./static/js/jqurey-3.6.3.js"></script>
        <script>
        const data = [
        { url: './static/BATTLEGROUNDS.jpg', title:'&emsp;BATTLEGROUNDS'},
        { url: './static/Dota 2.jpg',title:'&emsp;Dota 2',},
        { url: './static/Global Offensive.jpg',title:'&emsp;Global Offensive'},
        { url: './static/Goose Goose Duck.jpg' ,title:'&emsp;Goose Goose Duck'},
        { url: './static/wallpaper.jpg',title:'&emsp;wallpaper'},
        ]
        //声明跳转的图片路径及文字
        const img = document.querySelector('img')
        const span = document.querySelector('span')
        const bottom = document.querySelector('.bottom')
        // 声明并获取图片、文字、底部切换的标签或class名称
        let i = 0//初始化
        
        //定义轮播函数
        function toggle(){
            img.src = data[i].url
            span.innerHTML = data[i].title
            //导入图片和文字
            document.querySelector('.active').classList.remove('active')//获取当前底部图标，若存在则清除
            document.querySelector(`.btn li:nth-child(${i + 1})`).classList.add('active')//若跳转到当前图片则添加为当前底部图标
        }
        //设置上一张
        const last = document.querySelector('.last')
        last.addEventListener('click',function(){
            i--
            i = i < 0 ? data.length - 1 : i//对是否小于初始化进行判断，若是则跳转到倒数第二张图，实现无缝衔接，反之继续
            toggle()
        })

        const next = document.querySelector('.next')
        next.addEventListener('click',function(){
            i++
            i = i >= data.length ? 0 : i//对是否为最后一张图进行判断，若是则初始化实现无缝衔接，反之继续
            toggle()
        })
        //自动播放定时器（调用右点击按钮）
        let timer = setInterval(function(){
            next.click()
        },2000)
        //鼠标移入清除定时器
        const show = document.querySelector('.show')
        show.addEventListener('mouseenter',function(){
            clearInterval(timer)
        })
        last.addEventListener('mouseenter',function(){
            clearInterval(timer)
            
        })
        next.addEventListener('mouseenter',function(){
            clearInterval(timer)
            
        })
        show.addEventListener('mouseleave',function(){
            //先关再开，防止计时紊乱
            clearInterval(timer)
            timer = setInterval(function(){
            next.click()
            },2000)
            //使用jq hover实现鼠标移入显示移除隐藏
            $(".container").hover(
                function(){
                    $(".toggle").show();
                },
                function(){
                    $(".toggle").hide();
                }
            )
        })
        //实现底部切换图片
        const change = document.querySelectorAll('li')
        for(let j = 0; j < change.length; j++){
            change[j].addEventListener('click',function(){
                i = j
                toggle()
            })
        }
        // 鼠标移入底部清除定时器
        bottom.addEventListener('mouseenter',function(){
            clearInterval(timer)
            
        })
        // 鼠标移出底部调用定时器
        bottom.addEventListener('mouseleave',function(){
            clearInterval(timer)
            timer = setInterval(function(){
            next.click()
            },2000)
            
        })
    </script>
</body>
</html>