提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

C站能力认证（C4前端基础认证）//任务四：根据上面示图的例子，完成下列以下功能：1.实现左右点击控制轮播图左右滑动效果。2. 实现点击下面不同的小圆点显示不同的轮播图

控制认证基础前端 实现 功能 显示 效果
2023-09-11 14:22:43 时间

任务练习

 

轮播图静态页面

在这里插入图片描述
 

根据上面示图的例子，完成下列以下功能：

 

1. 实现左右点击控制轮播图左右滑动效果
2. 实现点击下面不同的小圆点显示不同的轮播图

 

要求：

1. 图片样式不能乱，在各个主流浏览器可以兼容
2. javascript效果不能出现错乱或者控制台报错

 
代码块：
HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="box" onmouseover="stop()" onmouseout="start()">
    <img class="slide" src="https://task-study.oss-cn-hangzhou.aliyuncs.com/c4-client/banner1.jpg" alt="banner1">
    <img class="slide" src="https://task-study.oss-cn-hangzhou.aliyuncs.com/c4-client/banner2.jpg" alt="banner2">
    <img class="slide" src="https://task-study.oss-cn-hangzhou.aliyuncs.com/c4-client/banner3.jpg" alt="banner3">
    <ul class="slidePoint">
        <li class="dot active" onclick="currentSlide(0)"></li>
        <li class="dot" onclick="currentSlide(1)"></li>
        <li class="dot" onclick="currentSlide(2)"></li>
    </ul>
    <button type="button" class="btnLeft" onclick="leftMove()"><</button>
    <button type="button" class="btnRight" onclick="rightMove()">></button>
</div>
</body>
<script type="text/javascript" src="./common.js"></script>
</html>

CSS：

#box{
    width: 960px;
    height: 540px;
    position: relative;
    overflow: hidden; /*超出隐藏*/
    /*居中*/
    left: 50%;
    transform: translateX(-50%);
}

.slide{
    width: 960px;
    height: 540px;
    position: absolute;
}

.slidePoint {
    list-style: none;
    position: absolute;
    left: 45%;
    top: 490px;
    transform: translateX(-50%);
}

.dot {
    float: left;
    margin-left: 20px;
    width: 15px;
    height: 15px;
    border: 2px solid white;
    border-radius: 50%;
    background: none;
    display: inline-block;
    cursor: pointer;
    transition: 0.1s ease;
}

.active, .dot:hover {
    background-color: white;
}

button {
    border: 0;
    outline: none;
    background-color: transparent;
}

.btnLeft, .btnRight {
    list-style: none;
    position: absolute;
    top: 50%;
    z-index: 10;
    margin-top: -50px;
    padding: 16px;
    width: auto;
    height: 120px;
    color: lightgrey;
    background-color: rgba(0, 0, 0, 0.3);
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    line-height: 100px;
    cursor: pointer;
    transition: 0.6s ease;
}

.btnLeft {
    left: 0;
}

.btnRight {
    right: 0;
}

.btnLeft:hover, .btnRight:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

Javascript:

let moveId;
let timeId;

// 1. onload 事件会在页面或图像加载完成后立即发生。
window.onload = function(){
    var arr = document.getElementsByClassName("slide")
    for(var i = 0;i < arr.length; i++) {
        arr[i].style.left = i * 960 + "px";
    }
}

// 2. 执行BannerMove方法
function BannerMove() {
    var i;
    var arr = document.getElementsByClassName("slide");  //读取图片位置
    var dots = document.getElementsByClassName("dot");  //读取圆点位置

    //确保向左按钮点击后恢复到原先图片向右顺序排列
    var left0 = parseFloat(arr[0].style.left);
    var left1 = parseFloat(arr[1].style.left);
    var left2 = parseFloat(arr[2].style.left);
    if (left0>0 && left0<960) {
        left1 = left0 + 960;
        left2 = left0 - 960;
    }
    if (left1>0 && left1<960) {
        left2 = left1 + 960;
        left0 = left1 - 960;
    }
    if (left2>0 && left2<960) {
        left0 = left2 + 960;
        left1 = left2 - 960;
    }
    arr[0].style.left = left0 + "px";
    arr[1].style.left = left1 + "px";
    arr[2].style.left = left2 + "px";

    for (i = 0; i < arr.length; i++) {
        var left = parseFloat(arr[i].style.left);
        if (left>=0 && left<960)  //确定圆点根据图片位置做切换
            dots[i].className = "dot active"
        else
            dots[i].className = "dot";
        if (left === 0)
            continue;
        left -= 10;
        var width = 960; // 图片的宽度
        if (left <= -width) {
            left = (arr.length - 1) * width; // 当图片完全走出显示框，拼接到末尾
            clearInterval(moveId);
        }
        arr[i].style.left = left + "px";
    }
}

// 3. 执行BannerReverseMove方法（主要用于左侧点击按钮），与BannerMove方法相反
function BannerReverseMove() {
    var i;
    var arr = document.getElementsByClassName("slide");  //读取图片位置
    var dots = document.getElementsByClassName("dot");  //读取圆点位置
    for (i = arr.length - 1; i >= 0; i--) {
        var left = parseFloat(arr[i].style.left);
        if (left > -960 && left < 0)  //确定圆点根据图片位置做切换
            dots[i].className = "dot active";
        else
            dots[i].className = "dot";
        left += 10;
        var width = 960;
        if (left >= width) {
            left = -1920;
            clearInterval(moveId);
        }
        arr[i].style.left = left + "px";
    }
}

// 4. 设置一个10毫秒定时器
function imgInterval(){
    moveId = setInterval(BannerMove, 10);
}
// 5. 设置一个5秒的定时器
timeId = setInterval(imgInterval, 5000);

// 6. 获取div盒子
var box = document.getElementById("box");

// 7. 鼠标移入轮播图盒子后发生
box.onfocus = function(){
    stop();
}
// 8. 停止方法
function stop(){
    clearInterval(moveId);
    clearInterval(timeId);
}

// 9. 鼠标移出轮播图盒子后发生
box.onblur = function(){
    start();
}

// 10. 开始方法
function start(){
    clearInterval(moveId);
    clearInterval(timeId);
    timeId = setInterval(imgInterval, 5000);
}
// 11. 进入标签页面监听
window.addEventListener('focus', function() {
    start();
}, false)

// 12. 离开标签页面监听
window.addEventListener('blur', function() {
    stop();
}, false)

// 13. 左右按钮功能
function rightMove() {
    clearInterval(moveId);
    var arr = document.getElementsByClassName("slide");
    if (arr[0].style.left === 0 + "px") {
        arr[1].style.left = 960 + "px";
        arr[2].style.left = 1920 + "px";
    }
    if (arr[1].style.left === 0 + "px") {
        arr[2].style.left = 960 + "px";
        arr[0].style.left = 1920 + "px";
    }
    if (arr[2].style.left === 0 + "px") {
        arr[0].style.left = 960 + "px";
        arr[1].style.left = 1920 + "px";
    }
    moveId = setInterval(BannerMove, 1);
}

function leftMove() {
    clearInterval(moveId);
    var arr = document.getElementsByClassName("slide");
    if (arr[0].style.left === 0 + "px") {
        arr[2].style.left = -960 + "px";
        arr[1].style.left = -1920 + "px";
    }
    if (arr[2].style.left === 0 + "px") {
        arr[1].style.left = -960 + "px";
        arr[0].style.left = -1920 + "px";
    }
    if (arr[1].style.left === 0 + "px") {
        arr[0].style.left = -960 + "px";
        arr[2].style.left = -1920 + "px";
    }
    moveId = setInterval(BannerReverseMove, 1);
}

// 14. 圆点切换功能
function currentSlide(n) {
    showSlides(n);
}
function showSlides(n) {
    var slides = document.getElementsByClassName("slide");
    var dots = document.getElementsByClassName("dot");
    if (n === 0) {
        slides[0].style.left = 0 + "px";
        slides[1].style.left = 960 + "px";
        slides[2].style.left = 1920 + "px";
        dots[0].className = "dot active";
        dots[1].className = "dot";
        dots[2].className = "dot";
    }
    if (n === 1) {
        slides[1].style.left = 0 + "px";
        slides[2].style.left = 960 + "px";
        slides[0].style.left = 1920 + "px";
        dots[1].className = "dot active";
        dots[2].className = "dot";
        dots[0].className = "dot";
    }
    if (n === 2) {
        slides[2].style.left = 0 + "px";
        slides[0].style.left = 960 + "px";
        slides[1].style.left = 1920 + "px";
        dots[2].className = "dot active";
        dots[0].className = "dot";
        dots[1].className = "dot";
    }
}

实现效果如下:

C站能力认证前端基础认证

相关文章