1.图片放置：你需要把所有图片放入一个div（这里就把它的class叫做pics吧）中，再把pics放入一个更大的div（就命名为container吧）中，然后把container的宽度设为一张图片的宽度，再给它设置overflow:hidden。然后把pics的宽度设置为所有图片的总宽度。这样方便后面从左向右切换。如下图所示：
2.图片轮播。基本要领是，当点击next按钮的时候，将pics容器的left属性定义到下一张图片的位置，从而移动到下一张图片，例如，假设当前是第二张图片，那么点击按钮的时候应该把pics的left值设为-640*2 + 'px'（因为我这里用的图片都是-640px的）（当然这里还要加入一个计数器，当点到最后一张图片的时候，计数器置0）。
如果你不打算加入平滑移动的动画，那到这里就可以结束了。但是如果你打算加入动画，这里就有一个问题：当移动到最后一张图片的时候，继续点击，图片组会由最后一张长途跋涉回滚到第一张，这样用户体验很不好。理想的状态应当是，当你滚动到最后一张继续滚动的时候，应当像之前滚向下一张一样无缝滚动。不知道我说的清不清楚，大致就是：像手机屏幕一样，当你滑动到最后一屏的时候接着滑动，会直接滑回一屏，也就是循环滑动。
它的基本原理是，你要在正常的图片组的最后面加入一张缓冲图片（src和第一张图片相同），当幻灯片正处于最后一张图片的时候，点击滑动按钮，平滑滑动到这张缓冲图片，当用户下一次点击的时候，再悄悄地把图片置换回真正的第一张图片，然后再执行动画。由于置换回第一张图片的时候是立即执行的，所以用户不会发现图片已经回到了真正的第一张，这就实现了循环滑动。
幻灯机的工作原理：幻灯机就是利用凸透镜当物体距透镜的距离大于一倍焦距而小于二倍焦距时成倒立、放大的实像这个原理制成的。当幻灯片离镜头的距离在一倍焦距和二倍焦距之间，用强光照射幻灯片时，就可以在屏幕上得到倒立、放大的实像。为了使得到的像成为“正立”的，所以要把幻灯片上下颠倒放置。
幻灯机是将要显示的幻灯片，由光源通过光学器件直射到屏幕上进行显示的设备。
幻灯机的种类很多，但其基本结构和原理大致相同。一般由光学、机身、机械传动、电气控制四部分构成。
1.光学部分是幻灯机的主要组成部分，其作用是用足够强的光线透射幻灯片，在银幕上呈现出放大了的清晰的影像。它由光源、聚光镜、反光镜、隔热玻璃、放映镜头等组成。
2.机身部分是由支撑光学部分和维持幻灯机工作机能的各个部件组成，它包括底座、外壳、灯箱、电源变压器、冷却风扇、镜头筒和升降足等。
3.机械传动部分主要由传动机构、换片机构、调焦机构组成，其部件有马达、传动轮、摩擦轮、蜗轮、蜗杆等。
4.电气控制部分主要是将操作者换片或调焦的旨意以电信号形式传递给机械传动部分，其功能多少随幻灯机种类的不同有所区别，一般具有无线遥控、有线遥控、定时控制、声控、讯控等功能。
