自学内容网 自学内容网
自学内容网 > 正文

JS实现轮播图优化版续（实现翻页无异化）

🕗 发布于 2024-12-08 17:42 前端  

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>
    <script src="js/轮播图.js" defer></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        img {
            width: 200px;
        }
        
        .container {
            width: 800px;
            height: 500px;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }
        
        .container .imgbox {
            width: 4000px;
            height: 100%;
            display: flex;
            position: absolute;
            left: -800px;
        }
        
        .container .imgbox li {
            list-style: none;
            width: 800px;
        }
        
        .container .imgbox li img {
            width: 100%;
            object-fit: cover;
        }
        
        .container .btn {
            position: absolute;
            width: 750px;
            height: 50px;
            margin: 200px 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .container .btn li {
            list-style: 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;
        }
    </style>
</head>

<body>

    <div class="container">
        <ul class="imgbox">//在首页前加尾页、在尾页前加首页
            <li><img src="img/轮播图3.jfif" alt=""></li>
            <li><img src="img/轮播图1.jfif" alt=""></li>
            <li><img src="img/轮播图2.jfif" alt=""></li>
            <li><img src="img/轮播图3.jfif" alt=""></li>
            <li><img src="img/轮播图1.jfif" alt=""></li>
        </ul>

        <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>
    </div>
</body>

</html>
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 = "-800px"//初始化变成-800px，因为此时第一页的位置放上最后一页
var oldpage=1
var flag=0//防止定时器太多导致轮播速度太快

//轮播切换的核心方法
var change = function(offset){
    //目标位置 
    var position=parseInt(imgbox.style.left)+offset

    //分步走，以此定时器实现过度动画效果
    var step = offset/100
    var timer1 = setInterval(function(){
        imgbox.style.left = (parseInt(imgbox.style.left)+step)+"px"
        if (parseInt(imgbox.style.left) == position) {
            //定时器停止
            clearInterval(timer1)
        }
        if (parseInt(imgbox.style.left)==0) {
            imgbox.style.left="-2400px"//在利用首页->伪尾页实现动画后切换到真正的尾页
        }
        if (parseInt(imgbox.style.left)==-3200){
            imgbox.style.left="-800px"//在利用尾页->伪首页实现动画后切换到真正的尾页
        }
    }, 10)
}

//上一页切换
left_btn.onclick=function(){
    if(flag==0){//加上判断语句
        change(800)

        //页码变化
        oldpage--
        highlight()

        flag = 1
        setTimeout(function(){
            flag=0
        }, 2000)
    }
}

//下一页切换
right_btn.onclick = function() {
    if (flag==0){//加上判断语句

        change(-800)

        //页码变化
        oldpage++
        highlight()

        flag = 1
        setTimeout(function() {
            flag = 0
        }, 2000)
    }
}

//自动切换
//timer定时器标志变量
var timer = setInterval(right_btn.onclick, 4000)

//避免手动自动冲突
left_btn.onmouseenter = function() {
    clearInterval(timer)
}
right_btn.onmouseenter = function() {
    clearInterval(timer)
}
left_btn.onmouseleave = function() {
    timer = setInterval(right_btn.onclick, 4000)
}
right_btn.onmouseleave = function() {
    timer = setInterval(right_btn.onclick, 4000)
}

//页码样式切换函数
var highlight = function() {
    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)
    }
}


原文地址：https://blog.csdn.net/Runner__Binger/article/details/144315396

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024