最近对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="css/index.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script src="js/index.js"></script>
</head>
<body onLoad="init()">
<div id = "picBox">
<ul class = "show_pic" style = "left: 0">
<li class = "on"><a href="#"><img src="imgs/ccc.jpg" alt="" title="" /></a></li>
<li><img src="imgs/aaa.jpg" alt="" title="" /></li>
<li><img src="imgs/bbb.jpg" alt="" title="" /></li>
<li><img src="imgs/ccc.jpg" alt="" title="" /></li>
<li><img src="imgs/ccc.jpg" alt="" title="" /></li>
</ul>
<div class = "bg"></div>
<ul class = "show_des">
<li class="on">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
function cleanWhitespace(oEelement)
{
for(var i=0;i<oEelement.childNodes.length;i++){
var node=oEelement.childNodes[i];
if(node.nodeType==3 && !/\S/.test(node.nodeValue))
{
node.parentNode.removeChild(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 = document.getElementById(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值减小
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);
}
}
};
var changeTo = function(num) {
for(var i=0; i<sum; i++)
{
con[i].className = "";
des[i].className = "";
};
con[num].className = "on";
des[num].className = "on";
var flag = Math.abs(parseInt(pic.style[point]))-sSingleSize * num ;
interval = setInterval(setVal(num, flag), time);
//bkg.hide().fadeIn();
}
function autoGlide()
{
clearTimeout(interval);
now = (now == (parseInt(sum)-1) )? 0: (now + 1);
changeTo(now);
timeout = setTimeout(autoGlide,delay);
}
function isAuto() {
if(auto) {
timeout = setTimeout(autoGlide,delay);
};
}
isAuto(); //开始自动轮播
for(var i=0; i<sum; i++) //导航按钮
{
con[i].onmouseover = (function(i)
{
return function()
{
clearTimeout(timeout);
clearInterval(interval);
changeTo(i);
this.onmouseout=isAuto();
}
})(i)
}
}
//淡入淡出
this.layerFader=function(auto, oBox, second, count, speed)
{
var interval,timeout; //两个定时器
var now = 0; //time图片移动一次时间间隔, now当前图片的index值
var delay = second * 1000; //每次切换图片的时间间隔
var picBox = document.getElementById(oBox);
cleanWhitespace(picBox);
var pic = picBox.childNodes[0].getElementsByTagName("li");
var des = picBox.childNodes[2].getElementsByTagName("li");
var con = picBox.childNodes[3].getElementsByTagName("li");
var sum = con.length;
function fadeIn(elem){
setOpacity(elem,0); //初始全透明
for(var i = 0;i<=count;i++){ //透明度改变 20 * 5 = 100
(function(i){
var level = i * 5; //透明度每次变化值
setTimeout(function(){
setOpacity(elem, level)
},i*speed);
})(i);
}
}
function setOpacity(elem, level) { //设置透明度
if (elem.filters) {
elem.style.filter = "alpha(opacity=" + level + ")";
} else {
elem.style.opacity = level / 100;
}
}
var changeTo = function(num) {
for(var i=0; i<sum; i++)
{
con[i].className = "";
des[i].className = "";
pic[i].className = "";
};
fadeIn(pic[num]);
con[num].className = "on";
des[num].className = "on";
pic[num].className = "on";
//bkg.hide().fadeIn();
}
function autoGlide()
{
clearTimeout(interval);
now = (now == (parseInt(sum)-1) )? 0: (now + 1);
changeTo(now);
timeout = setTimeout(autoGlide,delay);
}
function isAuto() {
if(auto) {
timeout = setTimeout(autoGlide,delay);
};
}
isAuto(); //开始自动轮播
for(var i=0; i<sum; i++) //导航按钮
{
con[i].onmouseover = (function(i)
{
return function()
{
clearTimeout(timeout);
//clearInterval(interval);
changeTo(i);
this.onmouseout=isAuto();
}
})(i)
}
}
jquery相对于js就简单了很多,这里就不赘述了。大三的时候上设计模式课,老师告诉我们针对接口而不是针对实现编程,代码中尽量不要出现常量,提高代码的复用性,所以写代码的时候,把可变的因素都提到了参数中。最后一句,对于js的DOM操作,js原生是王道,多用多练,才能掌握的好,希望以后越走越远。