JS实现轮播图优化版（实现翻页功能）

最新推荐文章于 2025-03-09 08:14:03 发布

Ut Relinquam

最新推荐文章于 2025-03-09 08:14:03 发布

阅读量369

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Runner__Binger/article/details/144314905

版权

相对于JS实现轮播图-CSDN博客这个增加了手动跳转图片功能

如上图，红色实现上下翻页，黄色实现页码翻页

HTML+CSS：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
            list-style:none;
            transition: left 1s ease;
        }
        img{
            width: 200px;
        }
        .container{
            width: 800px;
            height: 500px;
            /* background: yellow; */
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }
        .container .imgbox{
            width: 2400px;
            height: 100%;
            /* background: paleturquoise; */
            display: flex;
            position: absolute;
            left:0px;
            /* left: -800px;通过此命令让ul位置相对div移动，父类relative子类absolute会让子类相对父类调整位置，这个在JS上具体实现 */
        }
        .container .imgbox li{
            list-style: none;
            width: 800px;
        }
        .container .imgbox li img{
            width: 800px;
            object-fit: cover;
        }
/*————————*如下是实现手动播放的CSS代码*/
        .container .btn{
            position: absolute;
            width: 750px;
            height: 50px;
            margin: 200px 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .container .btn li{
            position: none;
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.5);
            text-align: center;
            line-height: 50px;
            border-radius: 25px;
            cursor: pointer;/*让鼠标停留在翻页箭头上面显示的样式*/
        }
        .page{/*页码的样式*/
            position: absolute;
            width: 100%;
            margin-top: 460px;
            display: flex;
            justify-content: center;
        }
        .page li{/*页码的样式*/
            list-style: none;
            background: rgba(255, 255, 255, 0.5);
            margin: 0 3px;
            padding: 3px 5px;
            cursor: pointer;
            font-size: 14px;
        }
        .page .current {/*让当前图片对应页码拥有不同样式*/
            background: rgba(27, 114, 226, 0.5);
            color: #fff;
        }
/*————————*如上是实现手动播放的CSS代码*/
    </style>
    <script src="js/轮播图.js" defer></script>
</head>
<body>
    <div class="container">
        <ul class="imgbox">
            <li><img src="img/轮播图1.jfif" alt=""></li>
            <li><img src="img/轮播图2.jfif" alt=""></li>
            <li><img src="img/轮播图3.jfif" alt=""></li>
        </ul>
/*————————如下是实现手动播放的HTML代码*/
        <ul class="btn">/*上下翻页*/
            <li class="left">
                <
            </li>
            <li class="right">
                >
            </li>
        </ul>
        <ul class="page">/*页码翻页*/
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
/*————————如上是实现手动播放的HTML代码*/
    </div>
</body>
</html>

JS：

var imgbox=document.querySelector(".imgbox")
var left_btn=document.querySelector(".left")//获取左翻页按钮标签
var right_btn=document.querySelector(".right")//获取右翻页按钮标签
var page_item=document.querySelectorAll(".page li")//获取页码翻页按钮标签
imgbox.style.left="0px"//初始化
var oldpage = 1//手动调整前的页数，一开始的页数是1
// 轮播切换的核心方法
var change=function(offset){
    var position=parseInt(imgbox.style.left)+offset//新的位置，parseInt将字符串强行转为数组
    //以下if语句用来防止越界
    if (position<-1600){
        position = 0
    }else if (position>0){
        position = -1600
    }
    imgbox.style.left=position+"px"
}
//上一页切换
left_btn.onclick=function(){
    change(800)
    //页码变化
    oldpage--
    highlight()
}//直接写change(-800)的话会得到返回值
//下一页切换
right_btn.onclick=function(){
    change(-800)
    //页码变化
    oldpage++
    highlight()
}
//自动切换
var timer=setInterval(right_btn.onclick,4000)//由于自动切换就是切换到下一页，和手动点击下一页一样所以直接套用

//避免手动和自动冲突，在鼠标放在手动按钮上停止自动计时，鼠标离开再继续
left_btn.onmouseenter=function(){
    clearInterval(timer)
}
right_btn.onmouseenter=function(){
    clearInterval(timer)
}
left_btn.onmouseleave=function(){
    setInterval(timer)
}
right_btn.onmouseleave=function(){
    setInterval(timer)
}

//页码样式切换函数，让当前图片对应页码样式和其它不同
var highlight=function(){
    //以下if语句防止越界
    if (oldpage>3){
        oldpage=1
    }else if(oldpage<1) {
        oldpage=3
    }
    for(var i=0;i<page_item.length;i++){
        page_item[i].className=""//使得所有页码样式回归默认（使其不是当前样式）
        if(i==oldpage-1){//找到当前样式对应标签
            page_item[i].className="current"
        }
    }
}

//任意页码切换
for (var i=0;i<page_item.length;i++) {
    page_item[i].onclick=function(){

        //图片切换
        change((oldpage-this.innerText)*800)//找到页码
        oldpage=this.innerText

        //样式切换
        highlight()
    }

    //鼠标悬停时停止定时器
    page_item[i].onmouseenter = function() {
        clearInterval(timer)
    }

    //鼠标离开开始定时器
    page_item[i].onmouseleave = function() {
        timer = setInterval(right_btn.onclick, 4000)
    }
}