javascript实现轮播图

王大傻0928

已于 2023-01-06 16:49:17 修改

阅读量173

点赞数 1

分类专栏： JS html css 文章标签： javascript 前端开发语言

于 2022-12-28 18:34:06 首次发布

本文链接：https://blog.csdn.net/weixin_49981930/article/details/128472415

版权

html 同时被 3 个专栏收录

10 篇文章 1 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

实现效果图：在这里插入图片描述
实现功能：
1. 点击左右切换
2. 鼠标悬浮在小圆点自动切换

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">
    <title>轮播图</title>
    <link rel="stylesheet" href="./lunbo.css">

</head>
<body>
    <!-- 轮播图整体，隐藏的作用，超出部分隐藏 -->
    <div class="wrapper">
        <!-- 1.轮播区域 -->
        <ul class="lb">
            <li class="item"><img src="./juhua.webp" alt=""></li>
            <li class="item"><img src="./taohua.webp" alt=""></li>
            <li class="item"><img src="./rose.webp" alt=""></li>
            <li class="item"><img src="./sky.webp" alt=""></li>
            <li class="item"><img src="./soshu.webp" alt=""></li>
            <!-- 为了首尾衔接 -->
            <li class="item"><img src="./juhua.webp" alt=""></li>
        </ul>
        <!-- 2.按钮组 -->
        <div class="lbtn"></div>
        <div class="rbtn"></div>
        <!-- 小白点区域 -->
        <ul class="spots">
            <li class="dot active"></li>
            <li class="dot"></li>
            <li class="dot"></li>
            <li class="dot"></li>
            <li class="dot"></li>
        </ul>
    </div>
    <script src="./lunbo.js"></script>
</body>
</html>

js代码：

// 从start运动到end
function move(dom, prop, start, end) {
    var speed = 7;
    if(end < start) {
        speed = -7;
    }
    dom.style[prop] = start + 'px';
    var tid = setInterval(function () {
        var val = parseInt(getComputedStyle(dom)[prop]);
        val += speed;
        dom.style[prop] = val + 'px';
        if (speed > 0 && val >= end || speed < 0 && val <= end) {
            clearInterval(tid);
            dom.style[prop] = end + 'px';
        }
    }, 2);
}

//DOM
//整个轮播区域
var lb = document.getElementsByClassName('lb')[0];

// 获取左右按钮
var lbtn = document.getElementsByClassName('lbtn')[0];
var rbtn = document.getElementsByClassName('rbtn')[0];

// 小白点区域
var spots = document.getElementsByClassName('spots')[0];
var dots = spots.getElementsByClassName('dot');
var activeDot = spots.getElementsByClassName('active')[0];

// 当前页
var nowPage = 0;
// 左按钮
lbtn.onclick = function() {
    var orign = nowPage;
    if (nowPage > 0) {
        nowPage --;
    }else {
        nowPage = 4;
    }
    lb.style.left = -nowPage * 700 + 'px';
    changePage(origin, nowPage);
}
// 右按钮
rbtn.onclick = function() {
    var orign = nowPage;
    if (nowPage < 4) {
        nowPage ++;
    } else {
        nowPage = 0;
    }
    lb.style.left = -nowPage * 700 + 'px';
    changePage(origin, nowPage);
}

// 从fromPage到toPage
function changePage(fromPage, toPage) {
    // a. 元素切换动画
    if (fromPage + 1 == toPage || fromPage - 1 == toPage){
        move(lb, 'left', -fromPage * 700, -toPage * 700);
    }else if ((fromPage == 0 && toPage == 4) || (fromPage == 4 && toPage == 0)){
        if (toPage < fromPage) {
            // 4 -> 0
            move(lb, 'left', -fromPage * 700, -(fromPage + 1) * 700);
        }else {
            // 0 -> 4
            move(lb, 'left', -(toPage + 1) * 700, -toPage * 700);
        }
    }else {
        move(lb, 'left', -fromPage * 700, -toPage * 700);
    }
    // b. 白点切换
    activeDot.className = 'dot';
    activeDot = dots[toPage];
    activeDot.className = 'dot active';
}


spots.onmouseover = function (e) {
    console.log(e.target.tagName);
    if(e.target.tagName == 'LI'){
        var fromPage = nowPage;
        nowPage = [].indexOf.call(dots, e.target);
        changePage(fromPage, nowPage);
    }
}