原生JavaScript实现轮播图：从静态布局到动态交互完整教程

/*内外边距的设置*/
* {
margin:0;
padding:0; 
}
/*图片在box中的位置*/
img {
vertical-align: top;
}
/*盒子box的整体样式*/
.css_box {
width: 500px;
height: 265px;
margin:100px auto;
position: relative;
overflow: hidden;
border: 1px solid green;
}
/*滚动盒子样式*/
.slider {
width: 500px;
height: 200px;
border: 1px solid red;

}
/*滚动盒子主要部分的样式*/
.slider-main {
border: 1px solid yellow;
width: 500px;
height: 200px;
}
/*滚动盒子主要部分的图片样式*/
.slider-main-img {
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 200px;
}
.slider-main-img img {
width: 100%;
}
/*两侧滚动控制的样式*/
.slider_ctrl {
text-align: center;
padding-top: 25px;
}
/*这样的类名，在html中找不到，但是又起到了作用，所以只有可能是是在js中创建了这样的类名！*/
/*控制点选轮播图的样式*/
.slider-ctrl-con {
width: 24px;
height: 20px;
display:inline-block;
background:url(../images/icon.jpg) no-repeat -24px -782px;
margin: 0 5px;
cursor: pointer;
text-indent: -20em;
overflow: hidden;
}
.current {
background-position: -24px -762px;
}

/*滑动控制的两个span样式*/
.slider-ctrl-prev,.slider-ctrl-next {
position: absolute;
top: 50%;
margin-top: -35px;
background:url(../images/icon.jpg) no-repeat 6px top;
width: 30px;
height: 35px;
opacity: 0.8;
cursor: pointer;
}
.slider-ctrl-prev {
left: 0;
}
.slider-ctrl-next {
right: 0;
background-position: -6px -44px;
}
/*css样式到此暂时结束*/

// 这是一个运动框架，而且是多属性的！
// 创建一个名为animate的函数！obj为对象，json是json值，fn是回调函数！
function animate(obj,json,fn) 
{ 
clearInterval(obj.timer);//清除定时器，这一步是有影响的！
// 给对象设置一个定时器！
obj.timer = setInterval(function() 
{
var flag = true; //用来判断定时器什么时候停止！

//for in 循环，遍历json对象！ 
for(var attr in json){ 

var current = 0;
// 当前的状态，这一步很重要！
if(attr == "opacity")
{
current = parseInt(getStyle(obj,attr)*100);
}
else
{
current = parseInt(getStyle(obj,attr));
}
// 步长！
var step = ( json[attr] - current) / 10; 
step = step > 0 ? Math.ceil(step) : Math.floor(step);

// 判断透明度！
if(attr == "opacity") 
{ //in是一个二元的运算符，意思是第一个操作数的值是第二个操作数的属性名，会返回true！
// 这样就可以判断这个对象的样式上中是否有opacity的属性了！
if("opacity" in obj.style) 
{
// 如果条件成立，设置透明度值
obj.style.opacity = (current + step) /100;
}
else
{ 
// 如果不成立，则使用滤镜功能！

obj.style.filter = "alpha(opacity = "+(current + step)+")";

}
}

// 层叠！
else if(attr == "zIndex")
{
obj.style.zIndex = json[attr];
}
else
{
obj.style[attr] = current + step + "px" ;
}
// 截止值!
if(current != json[attr]) 
{
flag = false;
}
}
if(flag) 
{
clearInterval(obj.timer);
// 如果有回调就使用回调！
if(fn) 
{
fn(); 
}
}
},5)
}
// 考虑兼容性问题！
function getStyle(obj,attr) { 
if(obj.currentStyle) 
{
return obj.currentStyle[attr]; 
}
else
{
return window.getComputedStyle(obj,null)[attr]; 
}
}
// 多属性运动框架结束！