本文主要是介绍JS实现无缝切换轮播图(自动+手动),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
一、背景
说起轮播图,大家应该都不陌生,各大购物网站和面试题里都能看到它的身影。
实现上也并不困难,而写这篇文章是想整理一下自己心血来潮写的代码,以及实现过程中的一些思考,大家也可以顺便复习巩固一下。
今天给大家带来的是过渡动画等效果都由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"
这篇关于JS实现无缝切换轮播图(自动+手动)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!