原生JS小米官网轮播实战（详解+思路+素材）

最新推荐文章于 2023-03-10 15:40:35 发布

可爱的小柠檬i

最新推荐文章于 2023-03-10 15:40:35 发布

阅读量2k

点赞数 8

分类专栏：小米官网实战文章标签： html5 css3 javascript

本文链接：https://blog.csdn.net/weixin_41861229/article/details/106531531

版权

本文详述了使用原生JS创建小米官网风格轮播图的实战过程，包括思路分析、知识点讲解及代码实现。通过箭头点击切换、小圆点交互和自动轮播等功能，展现了如何利用querySelector、classList等方法操作DOM元素实现轮播效果。

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

实战后的效果图

思路分析

首先要先左右箭头点击移动到一下张，其实就是用隐藏显示的效果展示，当用户点击的时候，清除上一张的显示样式，隐藏上一张图片，移动到下一张图片的时候，添加显示样式，实现轮播效果

箭头函数逻辑
当用户点击了右击箭头的时候，判断我们要显示第5张图片，移动到第6张的时候，我们需要它显示回第一张图片，左箭头同理

小圆点跟左右箭头的思路差不多，当用户没有点击的时候就跟随着图片的自动轮播而改变，当用户点击其中的小圆点了，就让当前图片显示为小圆点的位置下标。

知识点

获取元素我们可以用querySelector和querySelectorAll新属性比较好用，也可以用getElementById各取所需嘛

var aaa = document.querySelector(“div”); //获取文档中第一个div
var aaa = document.querySelectorAll(“div”); //获取文档所有的div
querySelector获取第一个，querySeletorAll获取所有

清除样式属性可以用ClassList的add和remove实现

slider[index].classList.remove(“current”); //清除current样式属性
slider[index].classList.add(“current”); //添加current样式属性 >

监听事件可以用addEventListener，相比较onclick，addEventListener更让人容易懂
prev.addEventListener(’‘click’’,function(){}) // pre的事件监听函数

了解了这些知识点，那就要实战了，事不宜迟，代码奉上

Html代码

<!-- index.html -->
 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>轮播图</title>
    <link rel="stylesheet" href="index.css">
</head>
 
<body>
 
    <div id="app">
        <div class="scroll">
            <ul>
                <li class="slider current"><img src="./img/1.jpg"></li>
                <li class="slider"><img src="./img/2.jpg"></li>
                <li class="slider"><img src="./img/3.jpg"></li>
                <li class="slider"><img src="./img/4.jpg"></li>
                <li class="slider"><img src="./img/5.jpg"></li>
            </ul>
 
            <!-- 左右箭头的展示 -->

最低0.47元/天解锁文章

可爱的小柠檬i

关注

8
点赞
踩
23

收藏

觉得还不错? 一键收藏
2
评论
原生JS小米官网轮播实战（详解+思路+素材）

原生JS小米官网轮播实战（详解+思路+素材）实战后的效果图实战思路首先要先左右箭头点击移动到一下张，其实就是用隐藏显示的效果展示，当用户点击的时候，清除上一张的显示样式，隐藏上一张图片，移动到下一张图片的时候，添加显示样式，实现轮播效果箭头函数逻辑当用户点击了右击箭头的时候，判断我们要显示第5张图片，移动到第6张的时候，我们需要它显示回第一张图片，左箭头同理小圆点跟左右箭头的思路差不多，当用户没有点击的时候就跟随着图片的自动轮播而改变，当用户点击其中的小圆点了，就让当前图片显示为小圆点的
复制链接

扫一扫