【面试集锦】好未来前端面试题---JS实现轮播图

最新推荐文章于 2024-08-15 20:53:53 发布

My-Lady

最新推荐文章于 2024-08-15 20:53:53 发布

阅读量4.6k

点赞数 3

分类专栏：前端面试集锦文章标签：轮播图原生JS

本文链接：https://blog.csdn.net/heshan1992/article/details/77504204

版权

本文介绍了如何用原生JavaScript实现轮播图效果，包括设置图片容器、定位图片列表、使用定时器切换图片、响应鼠标事件停止或继续轮播、添加导航小圆点以及实现左右滑动功能。详细思路与代码展示，适合前端面试准备。

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

思路：
1、首先要有个盛放图片的容器，设置为单幅图片的宽高，且overflow：hidden，这样保证每次可以只显示一个图片
2、container内有个放图片的list进行position的定位，其中的图片采用float的方式，同时当图片进行轮播时，改变list的Left值使得其显示的图片发生变化。
3、图片的轮播使用定时器，通过定时器改变list的Left值是的图片循环展示
4、当鼠标滑动到图片上时，清除定时器，图片停止轮播，当鼠标移出时继续进行轮播
5、图片上有一组小圆点用于与当前显示的图片相对应，同时可以通过点击的方式查看对应的图片
6、图片可以通过点击pre,next进行左右滑动显示
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style type="text/css">
        .container{
            margin:0 auto;
            width:600px;
            height:400px;
            position: relative;
            overflow: hidden;
            border:4px solid gray;
            box-shadow: 3px 3px 5px gray;
            border-radius:10px;
        }
        .list{
            width:4200px;
            height:400px;
            position: absolute;
            top:0px;
        }
        img{
            float:left;
            width:600px;
            height:400px;
        }
      .dots{
          pos