Web前端基础(14)JS实践案例--旋转木马效果

Demo演示效果

html布局

<div class="wrap" id="wrap">
   <p class="headp"><a href="http://dp2px.com"><span id="headlink">旋转木马轮播效果</span></a></p>
   <div class="slide" id="slide">
       <ul>
           <li><a href="#"><img src="images/slidepic1.jpg" title="dp2px.com-旋转木马轮播图"/></a></li>
           <li><a href="#"><img src="images/slidepic2.jpg" title="dp2px.com-旋转木马轮播图"/></a></li>
           <li><a href="#"><img src="images/slidepic3.jpg" title="dp2px.com-旋转木马轮播图"/></a></li>
           <li><a href="#"><img src="images/slidepic4.jpg" title="dp2px.com-旋转木马轮播图"/></a></li>
           <li><a href="#"><img src="images/slidepic5.jpg" title="dp2px.com-旋转木马轮播图"/></a></li>
       </ul>
       <div class="arrow" id="arrow">
           <a href="javascript:;" class="prev"></a>
           <a href="javascript:;" class="next"></a>
       </div>
   </div>
</div>

css样式很简单,让li绝对定位处于容器的中间,然后通过javascript动态设置位置。

.wrap{
    width:1200px;
    margin:100px auto;
}
.slide {
    height:500px;
    position: relative;
}
.slide li{
    position: absolute;
    left:200px;
    top:0;
}
.slide li img{
    width:100%;
}

初始化样式

首先初始化css样式,因为不同的浏览器对有些标签的默认值是不同的,所以通常我们都会通过初始化代码来清除默认样式。

/*初始化  reset*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
ol,ul{list-style:none}
a{text-decoration:none}
fieldset,img{border:0;vertical-align:top;}
a,input,button,select,textarea{outline:none;}
a,button{cursor:pointer;}

前面我们都是写成下面这样的,为什么不这样写,这样写有什么问题呢?

*{margin:0; padding:0}

如果网站很大,CSS样式表文件很大,这样写的话,他会把所有的标签都初始化一遍,这样就大大的加强了网站运行的负载,会使网站加载的时候需要很长一段时间。

雅虎初始化代码

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; }
body { background:#fff; color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; }
td,th,caption { font-size:14px; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}
a { color:#555; text-decoration:none; }
a:hover { text-decoration:underline; }
img { border:none; }
ol,ul,li { list-style:none; }
input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; }
table { border-collapse:collapse; }
html {overflow-y: scroll;} 

.clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;}
.clearfix { *zoom:1; }

腾讯官网初始化代码

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} 
body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;} 
a{color:#2d374b;text-decoration:none} 
a:hover{color:#cd0200;text-decoration:underline} 
em{font-style:normal} 
li{list-style:none} 
img{border:0;vertical-align:middle} 
table{border-collapse:collapse;border-spacing:0} 
p{word-wrap:break-word}

新浪官网初始化代码

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;} 
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";} 
 
ul,ol{list-style-type:none;} 
select,input,img,select{vertical-align:middle;} 
 
a{text-decoration:none;} 
a:link{color:#009;} 
a:visited{color:#800080;} 
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}

淘宝官网初始化代码

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } 
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } 
h1, h2, h3, h4, h5, h6{ font-size:100%; } 
address, cite, dfn, em, var { font-style:normal; } 
code, kbd, pre, samp { font-family:couriernew, courier, monospace; } 
small{ font-size:12px; } 
ul, ol { list-style:none; } 
a { text-decoration:none; } 
a:hover { text-decoration:underline; } 
sup { vertical-align:text-top; } 
sub{ vertical-align:text-bottom; } 
legend { color:#000; } 
fieldset, img { border:0; } 
button, input, select, textarea { font-size:100%; } 
table { border-collapse:collapse; border-spacing:0; }

网易官网初始化代码

html {overflow-y:scroll;} 
body {margin:0; padding:29px00; font:12px"\5B8B\4F53",sans-serif;background:#ffffff;} 
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;} 
table,td,tr,th{font-size:12px;} 
li{list-style-type:none;} 
img{vertical-align:top;border:0;} 
ol,ul {list-style:none;} 
h1,h2,h3,h4,h5,h6{font-size:12px; font-weight:normal;} 
address,cite,code,em,th {font-weight:normal; font-style:normal;}

JS代码分析

初始化图片位置

//  存储了每个图片的信息
var json = [
    {   //  1
        width:400,
        top:20,
        left:50,
        opacity:20,
        z:2
    },
    {  // 2
        width:600,
        top:70,
        left:0,
        opacity:80,
        z:3
    },
    {   // 3
        width:800,
        top:100,
        left:200,
        opacity:100,
        z:4
    },
    {  // 4
        width:600,
        top:70,
        left:600,
        opacity:80,
        z:3
    },
    {   //5
        width:400,
        top:20,
        left:750,
        opacity:20,
        z:2
    }
];

接下来我们通过点击箭头的方向来计算这个json位置信息集合。

function change(flag) {
    //  来判断箭头方向(滚动方向)
    if(flag)
    {
        // 把 最后一个json 删除   并且把最后一个添加到json 第一个位置
            json.unshift(json.pop());
    }
    else
    {
        //   移除第一个   放到json 最后一个
        json.push(json.shift());
    }
}

移动动画

/**
 * Created by andy on 2015/11/23.
 */
// 多个属性运动框架  添加回调函数
function animate(obj, json, fn) {  // 给谁    json
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var flag = true;  // 用来判断是否停止定时器   一定写到遍历的外面
        for (var attr in json) {   // attr  属性     json[attr]  值
            //开始遍历 json
            // 计算步长    用 target 位置 减去当前的位置  除以 10
            // console.log(attr);
            var current = 0;
            if (attr == "opacity") {
                current = Math.round(parseInt(getStyle(obj, attr) * 100)) || 0;
                console.log(current);
            }
            else {
                current = parseInt(getStyle(obj, attr)); // 数值
            }
            // console.log(current);
            // 目标位置就是  属性值
            var step = (json[attr] - current) / 10;  // 步长  用目标位置 - 现在的位置 / 10
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            //判断透明度
            if (attr == "opacity")  // 判断用户有没有输入 opacity
            {
                if ("opacity" in obj.style)  // 判断 我们浏览器是否支持opacity
                {
                    // obj.style.opacity
                    obj.style.opacity = (current + step) / 100;
                }
                else {  // obj.style.filter = alpha(opacity = 30)
                    obj.style.filter = "alpha(opacity = " + (current + step) * 10 + ")";

                }
            }
            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);
            //alert("ok了");
            if (fn)   // 很简单   当定时器停止了。 动画就结束了  如果有回调,就应该执行回调
            {
                fn(); // 函数名 +  ()  调用函数  执行函数
            }
        }
    }, 10)
}
function getStyle(obj, attr) {  //  谁的      那个属性
    if (obj.currentStyle)  // ie 等
    {
        return obj.currentStyle[attr];  // 返回传递过来的某个属性
    }
    else {
        return window.getComputedStyle(obj, null)[attr];  // w3c 浏览器
    }
}

触发动画执行

onclick = function() {
    if(this.className == "prev")
    {
        //  alert("左侧")  移除第一个   放到json 最后一个
        if(jieliu == true)
        {
            change(false);
            jieliu = false;  // 点击完毕之后,立马取反
        }

    }
    else
    {
        // alert('右侧');   把 最后一个json 删除   并且把最后一个添加到json 第一个位置
        if(jieliu == true)
        {
            change(true);
            jieliu = false;  // 点击完毕之后,立马取反
        }
    }
}

function change(flag) {
    //  来判断
    if(flag)
    {
        // 把 最后一个json 删除   并且把最后一个添加到json 第一个位置
            json.unshift(json.pop());
    }
    else
    {
        //   移除第一个   放到json 最后一个
        json.push(json.shift());
    }
    // 为什么给for呢? 以为我们的json 有5个  盒子li 有 5个
    for(var i=0;i<json.length; i++)
    {
        animate(lis[i],{
            width: json[i].width,
            top: json[i].top,
            left: json[i].left,
            opacity:json[i].opacity,
            zIndex:json[i].z
        },function(){ jieliu = true;})  // 回调函数是等动画执行完毕  才行
    }
}