JS实现无缝切换轮播图(自动+手动)

最新推荐文章于 2024-05-01 02:45:00 发布

f清风q

最新推荐文章于 2024-05-01 02:45:00 发布

阅读量5w

点赞数 121

分类专栏： HTML5 JavaSript 文章标签： javascript html css 网页设计 JS 轮播图无缝滚动原生

本文链接：https://blog.csdn.net/u013347241/article/details/107054441

版权

一、背景

说起轮播图，大家应该都不陌生，各大购物网站和面试题里都能看到它的身影。
实现上也并不困难，而写这篇文章是想整理一下自己心血来潮写的代码，以及实现过程中的一些思考，大家也可以顺便复习巩固一下。
今天给大家带来的是过渡动画等效果都由JS实现的无缝轮播图。CSS实现轮播图等以后再写。

二、概述

(一) 实现的效果

整体效果
①自动播放
②鼠标停留时停止播放，并显示左右切换按钮
③点击左右按钮或者圆形下标时可手动切换
④图片可无缝切换，首尾图片切换时无违和感

(二) 布局

将所有图片横向排列，然后依次向左移动至显示区域内(红框)，借助 overflow: hidden; 让显示区域以外的内容不显示，基本布局就成型了。

(三) 动画效果

通过JS实现动画效果，要借助定时器setInterval()，固定的时间间隔等距移动图片(如10ms移动10px)，直至达到目标位置。

(四) 无缝切换

所谓无缝切换就是轮播图翻页时，用户不会感受到明显的跳动，而是均匀、平缓的变化。
首先，将第一张图片复制一份，添加至所有图片的末尾(即图⑥)，这张图片将起到过渡作用：

当要从图①翻至图⑤时【向左翻页】，改变偏移量 -> 将当前图片变为图⑥，再执行翻页动作；
当要从图⑥翻至图②时【向右翻页】，改变偏移量 -> 将当前图片变为图①，再执行翻页动作；

也就是首尾图片更替时，要多做一些处理。文字描述起来有点绕，结合代码和实际效果会好理解一些。

三、实现(详细代码见文末链接)

(一) HTML

这部分代码比较简单：

<!DOCTYPE html>
<html>
    <head>
        <title>Auto Image Silder</title>
        <link href="css/slider.css" rel="stylesheet" type="text/css" />
        <script src="js/slider.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="slider">
            <ul class="slieder-item-container">
                <li><a href="#"><img src="images/1.jpg" /></a></li>
                <li><a href="#"><img src="images/2.jpg" /><

最低0.47元/天解锁文章

f清风q

关注

121
点赞
踩
983

收藏

觉得还不错? 一键收藏
23
评论
JS实现无缝切换轮播图(自动+手动)

说起轮播图，大家应该都不陌生，各大购物网站和面试题里都能看到它的身影。实现上也并不困难，而写这篇文章是想整理一下自己心血来潮写的代码，以及实现过程中的一些思考，大家也可以顺便复习巩固一下。今天给大家带来的是过渡动画等效果都由JS实现的无缝轮播图。CSS实现轮播图等以后再写。
复制链接

扫一扫

专栏目录