焦点图（轮播图）

bright_snow

已于 2023-05-20 09:57:31 修改

阅读量1.6k

点赞数 5

分类专栏： js动效文章标签： css css3 html

于 2022-07-29 22:20:06 首次发布

本文链接：https://blog.csdn.net/qq_45659638/article/details/126064668

版权

js动效专栏收录该内容

2 篇文章 0 订阅

订阅专栏

练习如何制作焦点图，用到定时器。
最终效果：

能切换图片。
切换图片的同时，焦点变色。切换到第几张图片，第几个焦点变色。
点击“左”按钮，显示上一张图片，点击"右"按钮，显示下一张图片。
点击某个焦点，切换到指定图片，点击的焦点变色。
鼠标移入图片，图片停止移动，移出图片，图片继续移动。

文件结构：

文件结构
轮播效果浏览

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>Document</title>
    <link rel="stylesheet" href="css/style.css">
    <!-- 注意：错误的引用js： -->
    <!-- <link rel="stylesheet" href="js/style.js"> -->
    
</head>
<body>
    <div id="box">
        <ul id="one">
            <li><img src="img/1.jpg" alt=""></li>
            <li><img src="img/2.jpg" alt=""></li>
            <li><img src="img/3.jpg" alt=""></li>
            <li><img src="img/4.jpg" alt=""></li>
        </ul>
        <ul id="two">
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <span id="left">左</span>
        <span id="right">右</span>
    </div>
    <!-- 为了避免一些错误，一般在这引入js，尽量不在head中引用 -->
    <script src="js/my.js"></script>
</body>
</html>

css样式：

*{
    margin:0px;
    padding:0px;
    list-style: none;
}
#one{
    width:6000px;
    height:470px;
}
#box{
    width:590px;
    height:470px;
    margin:30px auto;
    position:relative;
    /* 超出部分隐藏： */
    overflow: hidden;
}
#one li{
    float:left;
}
#two{
    /* 给父级清除浮动： */
    overflow:hidden;
    /* 设置透明色： */
    background:rgba(255,255,255,0.2);
    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%)
}
#two li{
    float:left;
    width:10px;
    height:10px;
    background:white;
    border-radius:50%;
    margin:3px;
    cursor:pointer;
}
#left{
    color:white;
    background:purple;
    position:absolute;
    top:50%;
    left:0px;
    /* 向上移动元素高度的一半，这样才能真正做到居中： */
    transform:translateY(-50%);
    padding:10px;
    /* 设置右上角的弧度： */
    border-top-right-radius:50%;
    /* 设置右下角的弧度： */
    border-bottom-right-radius:50%;
    /* 鼠标放上去转换为小手： */
    cursor:pointer;
}
#right{
    color:white;
    background:purple;
    position:absolute;
    top:50%;
    right:0px;
    transform:translateY(-50%);
    padding:10px;
    border-top-left-radius:50%;
    border-bottom-left-radius:50%;
    cursor:pointer;
}
#two .current{
    background:purple;
}

js代码：

var box = document.getElementById('box');
var images = document.getElementById('one');
var left = document.getElementById('left');
var right = document.getElementById('right');
//two里面的所有li,得到的是数组：
var list1 = document.getElementById('two').children;
//定时器：
var timer;
var num = 0;//移动图片和给焦点添加样式时用到。
function go() {
    timer = setInterval(function () {
        num++;
        if (num == 4) { num = 0 };//定时器开启时，就往左移动一张图片的宽度，这里有4张图片，当移动3次时（此时num=3），来到第4张，当num++时num=4,此时应该显示第一张。
        images.style.transform = 'translateX(' + -num * 590 + 'px)';//图片向左移动

        for (var i = 0; i < list1.length; i++) {//遍历所有焦点，清除所有焦点的class属性。
            list1[i].removeAttribute('class', 'current');
        }
        list1[num].setAttribute('class', 'current');//给焦点添加class属性

    }, 1000)
}
go();
//鼠标移入的时候停止图片的移动：
box.onmouseenter = function () {
    clearInterval(timer)
}
//鼠标移出后继续移动：
box.onmouseleave = function () {
    go();
}
// 点击左按钮时：两种效果：1.图片移动 2.焦点移动
left.onclick = function () {
    num--;
    if (num == -1) { num = 3 };
    images.style.transform = 'translateX(' + -num * 590 + 'px)';

    for (var i = 0; i < list1.length; i++) {
        list1[i].removeAttribute('class', 'current');
    }
    list1[num].setAttribute('class', 'current');

}
// 点击右按钮时：
right.onclick = function () {
    num++;
    if (num == 4) { num = 0 };
    images.style.transform = 'translateX(' + -num * 590 + 'px)';

    for (var i = 0; i < list1.length; i++) {
        list1[i].removeAttribute('class');
    }
    list1[num].setAttribute('class', 'current');

}
//点击某个焦点，两种效果：1.跳转到指定图片 2.点击的焦点变色。
for (var a = 0; a < list1.length; a++) {
    list1[a].setAttribute('index', a);
    list1[a].onclick = function () {//遍历所有焦点，给它们都添加鼠标单击事件。
        num = this.getAttribute('index');//this表示当前点击的标签
        for (var i = 0; i < list1.length; i++) {
            list1[i].removeAttribute('class');
        }
        images.style.transform = 'translateX(' + -num * 590 + 'px)';
        this.setAttribute('class', 'current');
    }
}