网页特效之图片幻灯片：幻灯片原理解剖与实现
在网上看到很多的幻灯片图片特效，实现大致分两种
一：滑动方式
二：渐变类方式
注意：结构分为：符合结构意义的，如：ul > li 结构，有意义，同时也能实现效果、不存在结构意义的，如：DIV 实现，不存在结构，只为实现效果。但不管哪种结构，原理还是那两种繁衍出来的，也就是对基本进行修改即可做出一款新的效果。
没有做不出的效果，只有想不出的效果，大家做特效或看特效的时候，可以进行幻想，想象出更加奇特新意的效果。（有点跑题）
对以上模式进行进阶的：无缝滚动、简略图方式，只要把原理掌握，就可以继续对基本框架结构的幻灯片进行修改。
滑动方式原理解剖
①、通过滚动条来产生滑动效果
父框架的宽度比子框架的宽度小，就可以产生滚动条，然后控制滚动条。修改css属性，隐藏滚动条，但测试的时候不隐藏，方便调试。
注意：控制父框架对象的滚动条属性，而不是子框架对象的滚动条。
图解：
②、通过把移动对象设置CSS属性为“相对定位”、“绝对定位”，控制对象的“top”、“left”的属性产生滑动效果 [个人还是比较喜欢这种方式]
图解：
渐变类型方式原理解剖
==========以下的是滑动方式==================
javascript原生幻灯片
1.最简单、效果最简单，虽然不好看。
原理：通过把要显示的元素进行前后操作
用到知识点：添加元素 appendChild()、取节点首元素 firstChild/firstElementChild/children[]、取最后元素 lastChild/lastElementChild、元素宽度 offsetWidth、点击事件 click
先贴CSS和HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <title>PPT幻灯片轮番播放</title> <style type="text/css"> * { margin: 0; padding: 0 } #main { padding: 5px; width: 690px; height: 344px; margin: 100px auto; position: relative; text-align: center; } /*相框warp*/ .photo-warp { width: 680px; height: 344px; position: relative; overflow: hidden; box-shadow: 0 0 18px #cecece; } /*ul*/ .ul-ppt { width: auto; height: 344px; list-style: none; } .item { float: left; width: 680px; height: 344px; text-align: center; } .item img { width: 100%; height: 100%; border: none; } /*按钮*/ .left, .right { width: 76px; height: 112px; position: absolute; top: 120px; z-index: 1; } .left { background: url("images/prev.png") no-repeat; left: 0; } .right { background: url("images/next.png") no-repeat; right: 0; } </style> </head> <body> <div id="main"> <!--显示盒子，可以进行美化--> <div id="photoWarp" class="photo-warp"> <!--放图片的列表--> <ul id="pptBox" class="ul-ppt"> <li class="item"><img src="images/1.jpg" alt="1"/></li> <li class="item"><img src="images/2.jpg" alt="2"/></li> <li class="item"><img src="images/3.jpg" alt="3"/></li> </ul> </div> <!--按钮组--> <div id="leftButton" class="left"><a class="left-hover"></a></div> <div id="rightButton" class="right"><a class="right-hover"></a></div> </div> </body> </html>
结构其实可以不一样，效果差不多、幻灯片的结构与效果都不一样的，思路很多，所以不完全一样。
javascript代码
function $(j) { return document.getElementById(j); } /* * 通过节点控制实现 * */ //ul盒子 var ul = $("pptBox"); //li 集合 var li = document.getElementsByTagName("li"); //li 的宽度 var li_width = li[0].offsetWidth; // li 元素的长度 var all_li = li.length; //设置ul的width ul.style.width = (all_li * li_width) + "px"; //事件left $("leftButton").onclick = function () { var last_li; if (document.all) { //判断ie last_li = ul.lastChild; //取最后一个子元素 } else { last_li = ul.lastElementChild; //w3c标准方法 } ul.insertBefore(last_li, ul.children[0]); //移到第一个元素的左边 }; //事件right $("rightButton").onclick = function () { var first_li = ul.children[0];//取ul中第一个子元素 ul.appendChild(first_li); //添加到ul }
第二个方法
原理，通过控制滚动条的位置来把要显示的图片滚动到现在位置。这是比较常用的方法，里面的长度比外面的盒子长度长就会出现滚动条。不过这种方式做出来的效果，在切换的时候还是不够理想。这个是左右滚动，如果要做上下滚动、还有无缝滚动（把原来的复制一个），不建议用这种。
知识点：元素宽度/高度（包含边框和内边距）offsetWidth/offsetHeight、滚动条左边距离 scrollLeft、重复执行定时器 setInterval()、清除重复执行定时器 clearInterval()
CSS和HTML 代码与上面基本一样，因为上面的例子是通过这个例子修改的。
因为这个代码是分开写的，如果连续点击会出现卡顿，因为重复执行定时器，解决，把全部代码写成一个插件调用或一个函数，现在为了测试方便才这样写的
完整代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <title>PPT幻灯片轮番播放</title> <style type="text/css"> * { margin: 0; padding: 0 } #main { padding: 5px; width: 690px; height: 344px; margin: 100px auto; overflow: hidden; } /*相框warp*/ .photo-warp { width: 680px; height: 344px; position: relative; overflow: hidden; box-shadow: 0 0 18px #cecece; overflow: hidden; border-radius: 1.5em; } /*ul*/ .ul-ppt { width: auto; height: 344px; list-style: none; white-space: nowrap; clear: both; } .item { float: left; width: 680px; height: 344px; } .item img { width: 100%; height: 100%; border: none; } /*按钮*/ .left, .right { width: 76px; height: 112px; position: absolute; top: 214px; z-index: 1; } .left { background: url("images/prev.png") no-repeat; left: 220px; } .right { background: url("images/next.png") no-repeat; right: 220px; } </style> </head> <body> <div id="main"> <div id="photoWarp" class="photo-warp"> <ul id="pptBox" class="ul-ppt"> <li class="item"><img src="images/1.jpg" alt="1"/></li> <li class="item"><img src="images/2.jpg" alt="2"/></li> <li class="item"><img src="images/3.jpg" alt="3"/></li> </ul> </div> <div id="leftButton" class="left"><a class="left-hover"></a></div> <div id="rightButton" class="right"><a class="right-hover"></a></div> </div> <div id="txt" style="width: 280px;height: auto;"></div> <script type="text/javascript"> function $(j) { return document.getElementById(j); } //ul盒子 var ul = $("pptBox"); //li 集合 var li = document.getElementsByTagName("li"); //li 的宽度 var li_width = li[0].offsetWidth; // li 元素的长度 var all_li = li.length; //外盒子 var box = $("photoWarp"); //缓冲值 var buffer = 30; //缓冲速度 var buffer_speed = 1; //设置ul的width ul.style.width = (all_li * li_width) + "px"; //事件left $("leftButton").onclick = function () { function ppt_run() { //没有距离 if (box.scrollLeft == 0) { function demo() { if (box.scrollLeft == li_width * 2) { clearInterval(a); clearInterval(on_run); } box.scrollLeft = box.scrollLeft + 25; } var a = setInterval(demo, 10); } //有距离可以移动 if (box.scrollLeft <= li_width * (Math.ceil(box.scrollLeft / li_width) - 1) + buffer) { box.scrollLeft = box.scrollLeft - buffer_speed; } else { box.scrollLeft = box.scrollLeft - 25; } //只滚动一个图片的距离 if (box.scrollLeft % li_width == 0) { clearInterval(on_run); } } var on_run = setInterval(ppt_run, 10); }; //事件right $("rightButton").onclick = function () { function ppt_run() { //如果到了顶边 if (box.scrollLeft == li_width * 2) { function demo() { if (box.scrollLeft == 0) { clearInterval(a); clearInterval(on_run); } box.scrollLeft = box.scrollLeft - 25; } var a = setInterval(demo, 10); } //没到达最右边还可以移动 if (box.scrollLeft >= li_width * Math.ceil(box.scrollLeft / li_width) - buffer && box.scrollLeft < li_width * (Math.ceil(box.scrollLeft / li_width) + 1)) { box.scrollLeft = box.scrollLeft + buffer_speed; } else { box.scrollLeft = box.scrollLeft + 25; } //只滚动一个图片的距离 if (box.scrollLeft % li_width == 0) { clearInterval(on_run); } } var on_run = setInterval(ppt_run, 10); }; </script> </body> </html>
第三个方法
跟上面差不多，不过元素不是浮动，而且绝对定位，个人感觉这个方法还是比较好的。
代码还没写，
附上以前写过的一个jq图片滑动库（非无缝）
https://files.cnblogs.com/yyman001/JQMSlideshow.rar
下面有些是比较好的教程
【原】幻灯片系列之百叶窗
http://bbs.blueidea.com/thread-3003636-1-1.html
【原】幻灯片系列（二）--回旋滚轴切换
http://bbs.blueidea.com/forum.php?mod=viewthread&tid=3004418
未完。。。等待更新。
