焦点图轮播图

bright_snow

2024-04-23 帮助1人

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

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

文件结构：

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="https://blog.csdn.net/qq_45659638/article/details/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');
    }
}

这篇好文章是转载于：学新通技术网

焦点图轮播图

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

word里面弄一个表格后上面的标题会跑到下面怎么办

《学习通》视频自动暂停处理方法

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐