详解JavaScript轮播图做成原理
发布时间：2022-04-20 09:28:14 所属栏目：语言 来源：互联网
导读：想要制作一个轮播图我们要先弄清楚他的原理，如何能让图片自右向左滑动？轮播图是网页开发中经常见到的效果，购物网站，视频网站，社区论坛等等网站都会应用到，那么轮播图是如何制作的呢？首先，我们需要搞懂轮播图的实现原理，下面是让图片自右向左滑动的
|
想要制作一个轮播图我们要先弄清楚他的原理，如何能让图片自右向左滑动？轮播图是网页开发中经常见到的效果，购物网站，视频网站，社区论坛等等网站都会应用到，那么轮播图是如何制作的呢？首先，我们需要搞懂轮播图的实现原理，下面是让图片自右向左滑动的原理以及代码实现，感兴趣的朋友继续往下看吧。 让我们想一想生活中有没有类似轮播图的东西，比如电影胶片。我们可以创建一个块作为投影区，创建一个列表作为底片并使其向左移动，达到轮播图效果。 创建一个块作为总的容器和显示区域。 <div id="out"> <ul id="imgList"> <li><img src="pto/many.jpg" ></li> <li><img src="pto/hello.jpg" ></li> <li><img src="pto/timg.jpg" ></li> <li><img src="pto/zhenjing.jpg"></li> </ul> </div> 现在图片竖着堆在一列，块也不知道在哪里，那添加一点样式 开启定位并令其居中，并且让块大一点并添加背景好确定位置（本实验图片统一宽高比500*431，所以div宽高比520*451） 去掉列表默认样式让列表横着显示 *{ margin: 0; padding: 0; } #out{ width:520px; height:451px ; background-color: #00bcd4; position: relative; margin: 50px auto; /*overflow: hidden;*/ /*剪掉我们不需要的部分，为了方便调试注掉了*/ 导航栏 轮播图会定时更换，但是有可能你的客户刚刚被吸引就已经更换图片了，如果你想让你的客户干巴巴的瞪着图片回来，你很可能失去她。 所以一个完整的轮播图还需要一个能手动切换前后的按钮或一个导航条。 我们这里用几个超链接完成任务 <div id="navDiv"> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> </div> ul在开启绝对定位后脱离文档流，现在我们的导航因为没有内容缩成一团挤在左上角，我们要让每一个超联接彼此分开，手动撑开空间，调整到靠下的位置，下方正中或靠右是比较好的选择。调整透明度降低导航对于人的吸引力，毕竟图片才是主题。而位置的调整为了便于扩充我们还是要用js来解决。 （编辑：云计算网_泰州站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
浙公网安备 33038102330476号