标签：宽高 http 独立 执行 设置 png 这一 鼠标 node
准确的来说，一个页面能够独立的做出轮播图才算是刚步入前端世界。说轮播图之前先来说说标签页，。因为它比较简单，我的效果使用jquery来实现的，。
具体代码只有一点点，。
var timeout; $(document).ready(function(){ $("#tabfirst li").each(function(index){ var liNode=$(this); liNode.click(function(){ timeout=setTimeout(function(){ $(".show").removeClass("show"); $("#tabfirst li.tabin").removeClass("tabin"); $(".banner img").eq(index).addClass("show"); liNode.addClass("tabin"); },300); }).mouseout(function(){ clearTimeout(timeout); }); }); });
我设的是点击事件，当然也可以是鼠标悬浮，只需要将click改成hover就可以了，另外，由于是鼠标放在li标签上实现效果，所以，需要先遍历一下li标签，用.each遍历。好了，在申明一个变量liNode赋值给$(this),也就是当前的li标签，另外设置点击事件，点击之后执行一个函数，先移除类名为show和类名为tabin的元素，也就是刷新页面直接显示出来的内容和相对应的类名移除，移除了之后再添加点击的时候的内容和标签的类名。最后在设置一个定时器，setTimeout,鼠标移除的时候清除定时，clearTimeout.如此一来标签页就出来了。
再来说一下轮播图，。
首先我们来说一下，轮播图布局，。先设置一个大盒子，大盒子里面放三个小盒子，第一个小盒子里面放图片，第二个盒子放下面的图片相对应的几个按钮，第三个盒子里面放左右按钮，。另外最大盒子的宽和高就设成单张图片的宽高，再overflow:hidden.这样就只显示一张图片了，另外图片的父级的宽度就设成几张图片的宽度，高度就是单张图片的高度。在给下面的按钮和左右的按钮定位就可以放到自己想要的位置了。这样布局就完成了。
下面再来看看js这一块，。
首先写上window.onload = function (){}当然你不写window.onload也行，但是你得把js代码放在内容的后面，。接着，再来申明变量，赋值给每一个元素节点，。
另外就是几个函数方法来控制了，先来看看点击函数，当点击左右按钮的时候，图片滑动一个图片的宽度向左或者像右，这里要注意一点
if (index == 1) {
index = 5;
}
else {
index -= 1;
}，当index是1的时候，也就是图片是第一张的时候，在点击的时候就会跳到第五张，。否则就是自减1.
if (index == 5) {
index = 1;
}
else {
index += 1;
}同样，这和上面是同理。
function showButton() { for (var i = 0; i < buttons.length ; i++) { if( buttons[i].className == ‘on‘){ buttons[i].className = ‘‘; break; } } buttons[index - 1].className = ‘on‘; }
当点击左右按钮的时候下面的几个小按钮也会跟着向前走一步，。最后在再点击函数里面调用
showButton()，
接着我们要来设单张图片划过去的时间，间隔，这样就可以算出次数，最后就可以求出速度，。
var go = function (){ if ( (speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) { list.style.left = parseInt(list.style.left) + speed + ‘px‘; setTimeout(go, inteval); } else { list.style.left = left + ‘px‘; if(left>-200){ list.style.left = -600 * len + ‘px‘; } if(left<(-600 * len)) { list.style.left = ‘-600px‘; } animated = false; } } go();
最后用speed来穿插一个go函数，speed就是单次位移的距离，。这样一个轮播图基本就出来了。
标签：宽高 http 独立 执行 设置 png 这一 鼠标 node
原文地址：http://www.cnblogs.com/hopeelephant/p/6062510.html
