前端练手项目3-轮播图

最新推荐文章于 2023-07-18 12:00:46 发布

晴天.js

最新推荐文章于 2023-07-18 12:00:46 发布

阅读量102

点赞数

分类专栏： web-项目训练文章标签：前端 javascript css html css3

本文链接：https://blog.csdn.net/qq_43352505/article/details/129389538

版权

web-项目训练专栏收录该内容

7 篇文章 0 订阅

订阅专栏

js实现轮播图点击切换与自动切换

效果展示

在这里插入图片描述

项目难点

项目css布局

1，position定位

本项目利用绝对定位进行布局，position: relative;相对定位给到轮播图区域的父节点（相对定位指的是相对于原来的自己位置进行的定位，可以根据相对路径的理解思路去看待）；position: absolute;绝对定位，相对于的是最近的非静态定位的祖先节点进行位置变换，如果没有非静态定位的祖先节点，则以body作为参考。因此在我们进行定位布局的时候，通常有一个口诀：子绝父相。
position

属性值	意义
position: static;	静态定位，默认值
position: relativ;	相对定位，不脱离文档流，可能会出现div的遮挡；z-index解决，值越大，显示层级越高
position: absolute;	绝对定位，脱离文档流
position: fixed;	固定定位，脱离文档流

2，box-shadow(阴影)

box-shadow有5个属性值，形式如下:
box-shadow: x轴横移 y轴横移羽化值阴影范围颜色;
阴影可以使我们的页面看起来更加美观，非必须使用

3, css动画过渡

transition: opacity .5s linear;

transition 可以实现简单的动画效果，第一个值填写的是变化的效果可以选择颜色，透明度，移动等；第二个值填写的动画过渡的时间；第三个值是动画过度的一个过程，匀速变化还是变速变化。

图片切换（循环切换）

切换
在开始时所有图片与焦点的均不显示，只有需要显示的图片和焦点获得active类名，才能在页面显示。基于这样，我们只需要在进行点击或者时间到来之时，将当前图片的类置空，并为需要显示的图片设置active类名即可。
循环
我们对包裹图片的div进行获取，并将值存入一个数组中，通过对显示页面和数组长度的对比进行判断，来查看是否到了左右的最后一张图片。
代码片段如下

//准备一个变量，表示当前第几张，默认是0，因为默认显示索引第0张
        var index = 0
        //书写切换一张的函数
        //约定：
        //参数为true切换下一张
        //参数为false切换上一张
        //参数为数字切换到指定张
        function changeOne(type) {
            //1，让当前张消失
            imgs[index].className = ''
            points[index].className = ''
            //2，根据type传递的参数，来切换index的值
            if (type === true) {
                index++
            }
            else if (type === false) {
                index--
            }
            else {
                index = type
            }
            //判定index的边界值
            if (index >= imgs.length) {
                index = 0
            }
            if (index < 0) {
                index = imgs.length - 1
            }
            //3，让改变后的这一张显示
            imgs[index].className = 'active'
            points[index].className = 'active'
        }

js dom操作绑定点击函数

这是一个简单的操作，只是获取元素，修改元素的类名。可以参考我的前两个项目。

js 定时器

// 计时器自动切换
        setInterval(function(){
            changeOne(true)
        },5000)

setInterval（函数，时间）；本属性就两个值，一个是计时的时间，单位是毫秒；一个是时间到了之后需要进行的操作即函数部分，本片段中就是时间到了以后调用图片切换函数。

项目源码

源码仅供参考，有许多瑕疵，不建议直接使用

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body{
            background-color: gainsboro;
        }

        ol,
        ul,
        li {
            list-style: none;
        }

        .box {
            display: flex;
            width: 870px;
            height: 480px;
            padding: 2px 1px;
            margin: 15vh auto;
            text-align: center;
            /* background-color: red; */
            justify-content: space-around;
            flex-direction: row;
            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .8);
        }

        .box>ul {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .box>ul>li {
            width: 100%;
            height: 100%;
            position: absolute;
            
            left: 0;
            top: 0;
            opacity: 0;
            /* 动画过渡 */
            transition: opacity .5s linear;
        }

        .box>ul>li.active {
            opacity: 1;
        }

        .box>ol {
            width: 200px;
            height: 15px;
            position: absolute;
            /* left: center; */
            bottom: 15vh;
            background-color: rgba(0, 0, 0, .3);
            /* 弹性盒布局 */
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-radius: 7.5px;
        }

        .box>ol>li {
            width: 10px;
            height: 10px;
            background-color: #fff;
            border-radius: 50%;
        }

        .box>ol>li.active {
            background-color: orange;
        }

        .left {
            width: 30px;
            height: 30px;
            background-color: transparent;
            border: none;
            /* margin: 10px; */
            /* font-size: 15px; */
            line-height: 30px;
            position: absolute;
            left: 20%;
            top: 50vh;
            font-size: 30px;
            color: white;
        }

        .right {
            width: 30px;
            height: 30px;
            background-color: transparent;
            border: none;
            /* margin: 10px; */
            /* font-size: 15px; */
            line-height: 30px;
            position: absolute;
            right: 20%;
            top: 50vh;
            font-size: 30px;
            color: white;
        }

        .left:hover,.right:hover {
            background-color: rgba(0, 0, 0, .5);
        }
    </style>
</head>

<body>
    <div class="box" id="boxMain">
        <ul class="picture">
            <li class="active"><img src="./img/3sideshow/01.png" alt=""></li>
            <li><img src="./img/3sideshow/02.png" alt=""></li>
            <li><img src="./img/3sideshow/03.png" alt=""></li>
            <li><img src="./img/3sideshow/04.png" alt=""></li>
            <li><img src="./img/3sideshow/05.png" alt=""></li>
        </ul>
        <ol>
            <li data-i="0" data-name="point" class="active"></li>
            <li data-i="1" data-name="point"></li>
            <li data-i="2" data-name="point"></li>
            <li data-i="3" data-name="point"></li>
            <li data-i="4" data-name="point"></li>
        </ol>
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
    </div>
    <script>
        var imgs = document.querySelectorAll('ul>li')
        var points = document.querySelectorAll('ol>li')
        console.log(imgs.length)
        console.log(points)

        //准备一个变量，表示当前第几张，默认是0，因为默认显示索引第0张
        var index = 0
        //书写切换一张的函数
        //约定：
        //参数为true切换下一张
        //参数为false切换上一张
        //参数为数字切换到指定张
        function changeOne(type) {
            //1，让当前张消失
            imgs[index].className = ''
            points[index].className = ''
            //2，根据type传递的参数，来切换index的值
            if (type === true) {
                index++
            }
            else if (type === false) {
                index--
            }
            else {
                index = type
            }
            //判定index的边界值
            if (index >= imgs.length) {
                index = 0
            }
            if (index < 0) {
                index = imgs.length - 1
            }
            //3，让改变后的这一张显示
            imgs[index].className = 'active'
            points[index].className = 'active'
        }

        // 定点击事件
        boxMain.onclick = function (e) {
            var e = e || window.event; //浏览器兼容性 
            var elem = e.target || e.srcElement;
            console.log(elem.className)
            //切换按钮
            if(elem.className == 'left'){
                changeOne(false)
            }else if(elem.className == 'right'){
                changeOne(true)
            }
        }

        // 焦点绑定点击事件

        // 计时器自动切换
        setInterval(function(){
            changeOne(true)
        },5000)
    </script>
</body>

</html>

晴天.js

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端练手项目3-轮播图

本项目利用绝对定位进行布局，position: relative;相对定位给到轮播图区域的父节点（相对定位指的是相对于原来的自己位置进行的定位，可以根据相对路径的理解思路去看待）；绝对定位，相对于的是最近的非静态定位的祖先节点进行位置变换，如果没有非静态定位的祖先节点，则以body作为参考。因此在我们进行定位布局的时候，通常有一个口诀：子绝父相。
复制链接

扫一扫