最近对css的兴趣提不起来，因为以前对图片轮播一直耿耿于怀苦于学艺不精，所以，花了点时间熟悉了一下js。然后一条道走到黑，用jquery和js写了一下轮播和图片淡入的效果。以后学习的路很长，希望自己在前端的路上越走越远`(∩_∩)′
从原理来讲，网上的教程有很多，简单来说。
淡入淡出，其实这里只用到了淡入的效果。每一张淡入的图片，我们将它的display设置为block，其他为none，所以实际存在并且在文档流占位置的只有一张图片。在设置图片的display方式之前，将图片的透明度逐渐增大，就会给人一种淡入的感觉。
其实在js代码中，还有关键的一点，代码中用到了闭包，因此，才对闭包有了一点点认识。在这里多说几句吧：
闭包的官方”的解释是：闭包是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
比较简单的说法是：
当函数a的内部函数b被函数a外的一个变量引用的时候，就创建了一个闭包。
说的更透彻一些。所谓“闭包”，就是在构造函数体内定义另外的函数作为目标对象的方法函数，而这个对象的方法函数反过来引用外层函数体中的临时变量。这使得只要目标对象在生存期内始终能保持其方法，就能间接保持原构造函数体当时用到的临时变量值。
尽管最开始的构造函数调用已经结束，临时变量的名称也都消失了，但在目标对象的方法内却始终能引用到该变量的值，而且该值只能通这种方法来访问。即使再次调用相同的构造函数，但只会生成新对象和方法，新的临时变量只是对应新的值，和上次那次调用的是各自独立的。
下面这个函数就是一个闭包函数。为什么要用闭包？普通函数不可以吗？真的是不可以。这里闭包的作用是保持对flag的引用。如果不用闭包，对于局部变量来说，只要函数执行了一次，也就是flag执行了一次，这个局部变量就会被垃圾回收机制回收清理掉，而我们通过间歇调用中的函数引用flag变量，在第二次执行的时候，flag就会失去它的值，函数体无法执行正确的结果了。在开始接触前端的时候，觉得闭包可有可无，事实是，这东西真的很重要！
var setVal = function(s, flag) { return function() { pos = Math.abs(parseInt(pic.style[point])); if(flag > 0){ //当前点大于目标点坐标，画面向右移动，left值减小 pic.style[point] =-Math.floor(pos+(parseInt(s*sSingleSize) - pos)*speed) +'px'; } if(flag < 0) { pic.style[point] =-Math.ceil(pos+(parseInt(s*sSingleSize) - pos)*speed) +'px'; } if(pos == (sSingleSize * s)) { now = s; clearInterval(interval); } } };
下面是代码：
html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>picsGlide</title> <link href="https://www.jb51.net/css/index.css" type="text/css"> <script type="text/javascript" src="https://www.jb51.net/js/jquery-1.3.2.js"></script> <script src="https://www.jb51.net/js/index.js"></script> </head> <body> <div id = "picBox"> <ul class = "show_pic" style = "left: 0"> <li class = "on"><a href="#"><img src="https://www.jb51.net/imgs/ccc.jpg" alt="" title="" /></a></li> <li><img src="https://www.jb51.net/imgs/aaa.jpg" alt="" title="" /></li> <li><img src="https://www.jb51.net/imgs/bbb.jpg" alt="" title="" /></li> <li><img src="https://www.jb51.net/imgs/ccc.jpg" alt="" title="" /></li> <li><img src="https://www.jb51.net/imgs/ccc.jpg" alt="" title="" /></li> </ul> <div class = "bg"></div> <ul class = "show_des"> <li>puss in boots1</li> <li>puss in boots2</li> <li>puss in boots3</li> <li>puss in boots4</li> <li>puss in boots5</li> </ul> <ul class = "icon_num"> <li class = "on" >1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </body> </html>
css
body {font-size: 12px; } ul, li { padding: 0; margin: 0; list-style: none; } #picBox { width: 610px; height: 205px; margin: 50px auto; overflow: hidden; position: relative; font-size: 0; } /*轮播图片*/ #picBox .show_pic { width: 3050px; position: absolute; } #picBox .show_pic li { float: left; width: 610px; height: 205px; display: none; /*display: none; */ } #picBox .show_pic li.on { display: block; } #picBox .show_pic li img { display: block; width: 610px; height: 205px; } #picBox .icon_num { position: absolute; bottom: 12px; right: 10px; z-index: 10; } #picBox .icon_num li { float: left; /*background: url(/uploadfile/200912/28/FA15567738.gif) no-repeat -15px 0; */ width: 16px; height: 16px; font-size: 16px; color: #39F; text-align: center; cursor: pointer; margin-right: 5px; } #picBox .icon_num li.on { background: #000; opacity: 0.5; } /*背景*/ .bg { z-index: 1; position: absolute; bottom: 0; height: 40px; width: 610px; background: #000; opacity: 0.6; filter: alpha(opacity = 60); } #picBox .show_des { width: 300px; height: 18px; position: absolute; bottom: 11px; left: 15px; color: #fff; z-index: 10; } #picBox .show_des li { display: none; line-height: 18px; font-size: 18px; } #picBox .show_des li.on { display: block; }
js