html多图轮播淡⼊淡出js，原⽣JS实现图⽚轮播与淡⼊效果的简
单实例
最近对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] =-il(pos+(parseInt(s*sSingleSize) - pos)*speed) +'px';
}
if(pos == (sSingleSize * s))
{
now = s;
clearInterval(interval);
}
}
};
下⾯是代码：
html
picsGlide
puss in boots1
puss in boots2
puss in boots3
puss in boots4
puss in boots5
1
2
3
4
5
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 {
原生js和js的区别float: left;
width: 610px;
height: 205px;
display: none;
/*display: none;
*/
}
#picBox .show_ {
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;
text-align: center;
cursor: pointer;
margin-right: 5px;
}
#picBox .icon_ { 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_ {
display: block;
}
js
function cleanWhitespace(oEelement)
{
for(var i=0;i
var node=oEelement.childNodes[i];
deType==3 && !/\S/.deValue))
{
veChild(node);
}
}
}
//轮播代码
this.layerGlide=function(auto,oBox,sSingleSize,second,fSpeed,point)
{
var interval,timeout; //两个定时器
var pos; //当前定位坐标整形的绝对值
var time = second, now = 0; //time图⽚移动⼀次时间间隔， now当前图⽚的index值var speed = fSpeed //移动速度
var delay = second * 1000; //每次切换图⽚的时间间隔
var picBox = ElementById(oBox);
cleanWhitespace(picBox);
var pic = picBox.childNodes[0]; //图⽚列表
var des = picBox.childNodes[2].getElementsByTagName("li"); //图⽚列表
var con = picBox.childNodes[3].getElementsByTagName("li");
var sum = con.length;
var setVal = function(s, flag)
{
return function()
{
pos = Math.abs(parseInt(pic.style[point]));
if(flag > 0){ //当前点⼤于⽬标点坐标，画⾯向右移动，left值减⼩

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。