javascript - 如何使用javascript实现轮播？

Question

！图片从左到右滚动，当它悬停在区域中间时，它会变大，当它经过中间位置时，它会越来越小并消失。有谁知道如何使用 javascript 来实现这项工作？任何参考将不胜感激。

Answer 1

您实际上是在要求某人向您解释 Carousel 的许多方面是如何工作的。该级别详细信息的最佳选择是让您找到现有实现之一并对其进行分析。

从概念上讲，轮播行为包括：

1. 加载许多图像。
2. 添加事件处理程序以响应鼠标事件。
3. 检测某些鼠标事件并触发滚动动作的开始。
4. 创建动画以显示平移图像并更改其大小的运动。
5. 有几种不同的动画和改变大小的方法。这可以使用 CSS3 或使用 jQuery 的动画库或使用纯 JavaScript 中的计时器来完成，同时操纵图像的位置和缩放大小。
6. 当其他图像向外滚动时，将新图像旋转到视图中。

Answer 2

我想你可以在jQuery中使用animate函数。下面是我很久以前写的一段代码。但是你应该改变一些。'3000'表示毫秒。$(function(){ $("body").click(function(){ $("#panel").animate({left:"500px", height:"200px"},3000) .animate({top :"200px",height:"100px"},3000) .animate({left:"0px",height:"200px"},3000) .animate({top:"0px",height:"100px"}, 3000) }); });