原生js实现无缝轮播图(面向对象思维)

最新推荐文章于 2022-10-04 21:26:45 发布

kibuniverse

最新推荐文章于 2022-10-04 21:26:45 发布

阅读量374

点赞数

分类专栏： js js对象文章标签： javascript js

本文链接：https://blog.csdn.net/weixin_43990363/article/details/105664413

版权

原生js实现无缝轮播图(面向对象思维)

因为最近为了锻炼面向对象编程的思维，再加上以前写轮播图也有点小bug，所以就抽出时间重新写了一下轮播图

一、核心的思路

将所有需要展示的图片连成一张“长”的图片

将图片放入一个 `BOX` 内并为 `BOX`设置 `overflow: hidden`属性

通过定时器动态的改变绝对定位的`left`值实现图片在`BOX`自左向右或者自左向右滑动的效果

二、难点

如何在自动播放时从最后一张图片回到第一张图片?

需要在最后一张图片后放第一张图片，同理，第一张图片前也需要放置最后一张图片，即如果你需要展示张图片，那么实际应该在html中添加八张图片，（6,1,2,3,4,5,6,1）在每次自动播放完下一张图片后判断当前是否已经到最后一张（最后面的1）或者第一张（最前面的6），若已经是，然后将图片的绝对定位的left值修改至正确的位置

过多的定时器导致问题？

由于轮播图需要用较多的的定时器，可能会出现由于过多的定时器导致出现各种各样的问题（播放鬼畜），首先这里不推荐使用间歇调用serInterval()函数去实现自动轮播的效果，尽可能的使用超时调用setTimeout()函数去实现定时轮播的效果，原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。其次，函数功能单一化也可以避免这一点，具体实现请往下看

第二点就是尽可能的减少定时器的个数，尽可能的然让函数功能单一化，例如不要在控制图片滑动的函数中启动与图片滑动本身无关的定时器，让启动定时器的函数越少越好。

三、基本的代码思路

因为我是用面向对象的思想去写的，所以在这里写下我代码封装，轮播图对象抽象出来大体有以下方法

图片自动轮播开始以及结束函数

// 这两个函数不需要参数
function startAutoSlide() {
     }
function stopAutoSlide() {
     }

页面跳转的函数

function pageJump(target_index) {
     }

控制图片滑动的函数

function go(now_index, target_index) {
     }

四、代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>Document</title>
</head>
<body>

    <div id="box">
        <ul class="img_box">
            <li><img src="../img/6.jpg" alt=""></li>
            <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>
            <li><img src="../img/5.jpg" alt=""&g

最低0.47元/天解锁文章

kibuniverse

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
原生js实现无缝轮播图(面向对象思维)

原生js实现无缝轮播图(面向对象思维)因为最近为了锻炼面向对象编程的思维，再加上以前写轮播图也有点小bug，所以就抽出时间重新写了一下轮播图一、核心的思路将所有需要展示的图片连成一张“长”的图片将图片放入一个 BOX 内并为 BOX设置 overflow: hidden属性通过定时器动态的改变绝对定位的left值实现图片在BOX自左向右或者自左向右滑动的效果二、难点如何在自动播...
复制链接

扫一扫