实现一个简单的图片轮播效果

最新推荐文章于 2024-10-01 11:25:02 发布

SmallSweets

最新推荐文章于 2024-10-01 11:25:02 发布

阅读量4.4k

点赞数 7

分类专栏：前端文章标签： js css html 新星计划

本文链接：https://blog.csdn.net/qq_45675449/article/details/117406727

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了如何使用HTML、CSS和JavaScript来创建一个图片轮播效果。通过设置图片的不透明度和定时器，实现了在特定间隔内自动切换显示的图片。此外，还添加了手动切换图片的功能，用户可以通过点击按钮或小点来切换图片。CSS用于设置布局和样式，JavaScript则负责交互逻辑和动画效果。

摘要由CSDN通过智能技术生成

学习笔记

思路

这里就说一下我的思路吧，我们可以先将所有图片的不透明度设置为0，也就是全透明，不可见（也不一定靠设置透明度来实现图片不可见，也可以直接设置元素不可见），使用下标的方式来控制图片是否可见，指定下标的图片的不透明度设置为100，也就是图片可见，这样就实现了显示一张图片的效果，然后我们再用定时器循环改变这个下标，这样就实现了在特定间隔内显示不同图片的效果，也就是图片轮播。

效果

在这里插入图片描述

点击按钮切换图片的思路也是通过改变下标的方式来控制显示的图片
在这里插入图片描述

代码部分

网页部分

<body>
    <div id="box">
<!--        轮播图片-->
        <ul id="transform">
            <li><img src="1.jpg" alt="this is a picture"></li>
            <li><img src="2.jpg" alt="this is a picture"></li>
            <li><img src="4.jpg" alt="this is a picture"></li>
        </ul>
        <ul id="point">
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div id="left"><p><</p></div>
    <div id="right"><p>></p></div>
</body>

css部分

<style>
        * {
            margin: 0;
            padding: 0;
        }
        /*设置图片大小*/
        img {
            width: 700px;
            height: 500px;
            cursor: pointer;
        }
        #transform {
            position: absolute;
            top: 50px;
            left: 27%;
            list-style: none;
        }
        /*设置轮播图片样式*/
        #transform li {
            position: absolute;
            opacity: 100;
        }
        #point {
            position: absolute;
            top: 600px;
            left: 45%;
            display: flex;
            list-style: none;
        }
        /*小点样式*/
        #point li {
            width: 20px;
            height: 20px;
            background-color: aqua;
            border-radius: 50%;
            margin-left: 20px;
            cursor: pointer;
        }
    /*    左右切换按钮样式*/
        #left {
            position: absolute;
            top: 300px;
            left: 15%;
            font-size: 70px;
            font-weight: bold;
            color: #00000070;
            cursor: pointer;
        }
        #right {
            position: absolute;
            top: 300px;
            left: 80%;
            font-size: 70px;
            font-weight: bold;
            color: #00000070;
            cursor: pointer;
        }
    </style>

js部分

<script type="text/javascript">
<!--    自动执行定时器函数 图片自动轮播-->
    window.onload = automatic;

    var images = document.getElementById("transform").children;
    var points = document.getElementById("point").children;
    var interval;
    var leftButton = document.getElementById("left");
    var rightButton = document.getElementById("right");



    //设置开始图片下标 从第一张图片开始
    var index = 0;

    //循环设置元素下标
    for (var i = 0;i < images.length;i++){
        images[i].index = i;
        points[i].index = i;
        //添加点击小点切换图片事件
        points[i].onclick = appoint;
        images[i].onmouseover = function (){clearInterval(interval)};
        images[i].onmouseleave = function (){automatic()};
    }

    function appoint(){
        var apo = this.index;
        //循环设置li不透明度为0 也就是不可见
        for (var i = 0;i < images.length;i++){
            images[i].style.opacity = "0";
        }
        images[apo].style.opacity = "100";
    }

    //自动切换图片函数
    function automatic(){
        interval = setInterval(function (){
            //循环设置li不透明度为0 也就是不可见
            for (var i = 0;i < images.length;i++){
                images[i].style.opacity = "0";
            }
            //然后设置指定下标的li的不透明度为100 实现了显示指定下标的图片，而不显示其他图片
            images[index].style.opacity = "100";
            //下标自动增长
            index++;
            //下标如果超出范围，将下标重置为0
            if (index == images.length){
                index = 0;
            }
        },2000);
    }

    //为左右切换图片按钮添加事件
    leftButton.onclick = previous;
    //鼠标移动到 上一张 按钮 停止定时器
    leftButton.onmouseover = function (){clearInterval(interval)};
    //鼠标离开 上一张 按钮 开始定时器
    leftButton.onmouseleave = function (){automatic()};
    rightButton.onclick = next;
    //鼠标移动到 下一张 按钮 停止定时器
    rightButton.onmouseover = function (){clearInterval(interval)};
    //鼠标离开 下一张 按钮 开始定时器
    rightButton.onmouseleave = function (){automatic()};

    //切换下一张图片函数
    function next(){
        index = index + 1;
        //如果下标超出范围 将下标赋值为0
        if (index == images.length){
            index = 0;
        }
        //循环设置li不透明度为0 也就是不可见
        for (var i = 0;i < images.length;i++){
            images[i].style.opacity = "0";
        }
        //将下一张图片设置为可见
        images[index].style.opacity = "100";
    }

    //切换上一张图片
    function previous(){
        index = index - 1;
        //如果下标超出范围 将下标设置为 图片数量-1
        if (index == -1){
            index = images.length -1;
        }
        //循环设置li不透明度为0 也就是不可见
        for (var i = 0;i < images.length;i++){
            images[i].style.opacity = "0";
        }
        //将上一张图片设置为可见
        images[index].style.opacity = "100";
    }

</script>

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /*设置图片大小*/
        img {
            width: 700px;
            height: 500px;
            cursor: pointer;
        }
        #transform {
            position: absolute;
            top: 50px;
            left: 27%;
            list-style: none;
        }
        /*设置轮播图片样式*/
        #transform li {
            position: absolute;
            opacity: 100;
        }
        #point {
            position: absolute;
            top: 600px;
            left: 45%;
            display: flex;
            list-style: none;
        }
        /*小点样式*/
        #point li {
            width: 20px;
            height: 20px;
            background-color: aqua;
            border-radius: 50%;
            margin-left: 20px;
            cursor: pointer;
        }
    /*    左右切换按钮样式*/
        #left {
            position: absolute;
            top: 300px;
            left: 15%;
            font-size: 70px;
            font-weight: bold;
            color: #00000070;
            cursor: pointer;
        }
        #right {
            position: absolute;
            top: 300px;
            left: 80%;
            font-size: 70px;
            font-weight: bold;
            color: #00000070;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="box">
<!--        轮播图片-->
        <ul id="transform">
            <li><img src="1.jpg" alt="this is a picture"></li>
            <li><img src="2.jpg" alt="this is a picture"></li>
            <li><img src="4.jpg" alt="this is a picture"></li>
        </ul>
        <ul id="point">
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div id="left"><p><</p></div>
    <div id="right"><p>></p></div>
</body>

<script type="text/javascript">
<!--    自动执行定时器函数 图片自动轮播-->
    window.onload = automatic;

    var images = document.getElementById("transform").children;
    var points = document.getElementById("point").children;
    var interval;
    var leftButton = document.getElementById("left");
    var rightButton = document.getElementById("right");



    //设置开始图片下标 从第一张图片开始
    var index = 0;

    //循环设置元素下标
    for (var i = 0;i < images.length;i++){
        images[i].index = i;
        points[i].index = i;
        //添加点击小点切换图片事件
        points[i].onclick = appoint;
        images[i].onmouseover = function (){clearInterval(interval)};
        images[i].onmouseleave = function (){automatic()};
    }

    function appoint(){
        var apo = this.index;
        //循环设置li不透明度为0 也就是不可见
        for (var i = 0;i < images.length;i++){
            images[i].style.opacity = "0";
        }
        images[apo].style.opacity = "100";
    }

    //自动切换图片函数
    function automatic(){
        interval = setInterval(function (){
            //循环设置li不透明度为0 也就是不可见
            for (var i = 0;i < images.length;i++){
                images[i].style.opacity = "0";
            }
            //然后设置指定下标的li的不透明度为100 实现了显示指定下标的图片，而不显示其他图片
            images[index].style.opacity = "100";
            //下标自动增长
            index++;
            //下标如果超出范围，将下标重置为0
            if (index == images.length){
                index = 0;
            }
        },2000);
    }

    //为左右切换图片按钮添加事件
    leftButton.onclick = previous;
    //鼠标移动到 上一张 按钮 停止定时器
    leftButton.onmouseover = function (){clearInterval(interval)};
    //鼠标离开 上一张 按钮 开始定时器
    leftButton.onmouseleave = function (){automatic()};
    rightButton.onclick = next;
    //鼠标移动到 下一张 按钮 停止定时器
    rightButton.onmouseover = function (){clearInterval(interval)};
    //鼠标离开 下一张 按钮 开始定时器
    rightButton.onmouseleave = function (){automatic()};

    //切换下一张图片函数
    function next(){
        index = index + 1;
        //如果下标超出范围 将下标赋值为0
        if (index == images.length){
            index = 0;
        }
        //循环设置li不透明度为0 也就是不可见
        for (var i = 0;i < images.length;i++){
            images[i].style.opacity = "0";
        }
        //将下一张图片设置为可见
        images[index].style.opacity = "100";
    }

    //切换上一张图片
    function previous(){
        index = index - 1;
        //如果下标超出范围 将下标设置为 图片数量-1
        if (index == -1){
            index = images.length -1;
        }
        //循环设置li不透明度为0 也就是不可见
        for (var i = 0;i < images.length;i++){
            images[i].style.opacity = "0";
        }
        //将上一张图片设置为可见
        images[index].style.opacity = "100";
    }

</script>
</html>