轮播图动画效果实现-优快云博客

html部分

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="wy-css.css"/>
    <script src="animate.js"></script>
    <script src="wy-js.js"></script>
</head>
<body>
    <div class="w-slider" id="js_slider">
        <div class="slider">
            <div class="slider-main" id="slider_main_block">
                <div class="slider-main-img"><a href="#"><img src="images/wy1.jpg" alt=""/></a></div>
                <div class="slider-main-img"><a href="#"><img src="images/wy2.jpg" alt=""/></a></div>
                <div class="slider-main-img"><a href="#"><img src="images/wy3.jpg" alt=""/></a></div>
                <div class="slider-main-img"><a href="#"><img src="images/wy4.jpg" alt=""/></a></div>
                <div class="slider-main-img"><a href="#"><img src="images/wy5.jpg" alt=""/></a></div>
                <div class="slider-main-img"><a href="#"><img src="images/wy6.jpg" alt=""/></a></div>
            </div>
        </div>
        <div class="slider-ctrl" id="slider_ctrl">
            <span class="slider-ctrl-prev"></span>
            <span class="slider-ctrl-next"></span>
        </div>
    </div>
</body>
</html>

wy-js.js

/**
 * Created by Administrator on 2016-10-22.
 */
window.onload = function () {
    //获取元素
    function $(id){return document.getElementById(id)}
    var js_slider = $("js_slider"); //获取大盒子
    var slider_main_block = $("slider_main_block"); //获取图片的父亲
    var imgs = slider_main_block.children; //获取图片
    var slider_ctrl = $("slider_ctrl"); //获得控制的父盒子

    //操作元素
    //生成小span
    for(var i=0;i<imgs.length;i++){
        var span = document.createElement("span"); //创建span
        span.className = "slider-ctrl-con"; //添加类名
        span.innerHTML = imgs.length - i ; //实现倒叙的方式插入数字
        slider_ctrl.insertBefore(span,slider_ctrl.children[1]);//在父亲 倒数第二个盒子的前面插入
    }
    var spans = slider_ctrl.children; //得到所有的span
    spans[1].setAttribute("class","slider-ctrl-con current"); //两个类名

    var scrollWidth = js_slider.clientWidth;//得到大盒子的宽度 ，即后面动画每次走的距离
    //刚开始第一张图片留下，其余的图片放到右边
    for(var i=1;i<imgs.length;i++){ //从1开始
        imgs[i].style.left = scrollWidth + "px";
    }
    //遍历3个按钮
    var iNow = 0;//控制播放第几张
    for(var k in spans){  //k是索引号
        spans[k].onclick = function () {
            if(this.className == "slider-ctrl-prev"){ //判断当前点击是按钮是否是左侧按钮
                alert("点击了左侧按钮");
                //当我们点击左侧的时候，当前这张图片 先慢慢的走到右边，上一张 一定先快速回到左侧，-310位置，然后慢慢走到舞台中
                animate(imgs[iNow],{left:scrollWidth});
                --iNow > imgs.length-1 ? iNow =0 :iNow;
                imgs[iNow].style.left = scrollWidth + "px";//立马执行，快速回到右侧
                animate(imgs[iNow],{left:0}); //下一张走到0的位置，慢慢走过来
            }else if(this.className == "slider-ctrl-next"){ //右侧按钮开始
                //当我们点击的时候，当前这张图片 先慢慢的走到左边，下一张 一定先快速回到右侧，310位置，然后慢慢走到舞台中
                animate(imgs[iNow],{left:-scrollWidth});
                ++iNow > imgs.length-1 ? iNow =0 :iNow;
                imgs[iNow].style.left = scrollWidth + "px";//立马执行，快速回到右侧
                animate(imgs[iNow],{left:0}); //下一张走到0的位置，慢慢走过来
            }else{
                alert("点击了span下按钮");
            }
        }
    }
}

wy-css.css

*{
    margin: 0;
    padding: 0;
}
img{
    vertical-align: top;
}
.w-slider{
    width: 310px;
    height: 265px;
    margin: 100px auto;
    position: relative;
}
.slider{
    width: 310px;
    height: 220px;
}
.slider-main{
    width: 620px;
    height: 220px;
}
.slider-main-img{
    position: absolute;
    top: 0;
    left: 0;
}
.slider-ctrl{
    text-align: center;
    padding-top: 5px;
}
.slider-ctrl-con{
    width: 24px;
    height: 20px;
    display: inline-block;
    background:url("images/w-icon.png") no-repeat -24px -782px;
    margin: 0 5px;
    cursor: pointer;
    text-indent: -20em;
    overflow: hidden;
}
.current{
    background-position: -24px -762px;
}
.slider-ctrl-prev,.slider-ctrl-next{
    width: 30px;
    height: 35px;
    background: url("images/w-icon.png") no-repeat 6px top;
    position: absolute;
    top: 50%;
    margin-top: -35px;
    opacity: 0.7;
}
.slider-ctrl-prev{
    left: 0;
}
.slider-ctrl-next{
    right: 0;
    background-position: -6px -44px;
}