仿网页轮播图

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网易轮播图js部分</title>
    <link rel="stylesheet" href="css/css.css">
    <script src="js/slider.js"></script>
    <script src="js/animate.js"></script>
</head>
<body>
<div class="w-slider" id="js_slider"><!--js只支持下划线-->
    <div class="slider">
        <div class="slider-main" id="slider_main_block">
            <div class="slider-main-img"><a href="#"><img src="images/1.jpg" alt=""></a></div>
            <div class="slider-main-img"><a href="#"><img src="images/2.jpg" alt=""></a></div>
            <div class="slider-main-img"><a href="#"><img src="images/3.jpg" alt=""></a></div>
            <div class="slider-main-img"><a href="#"><img src="images/4.jpg" alt=""></a></div>
            <div class="slider-main-img"><a href="#"><img src="images/5.jpg" alt=""></a></div>
            <div class="slider-main-img"><a href="#"><img src="images/6.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>

css部分

@charset "UTF-8";
*{
    margin: 0;
    padding: 0;
}
img{
    vertical-align: top;
    /*去掉上下图片之间的空隙*/
}
.w-slider{
    width: 310px;
    height: 265px;
    margin: 100px auto;
    /**/
    position: relative;
    overflow: hidden;
}
.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/icon.png) no-repeat -24px -782px;
    /*精灵图实现 调整像素 */
    margin:0 5px;
    cursor: pointer;
    /*将1 2 3 4 5 6的数字隐藏*/
    text-indent: -20em; /*text-indent 属性规定文本块中首行文本的缩进。*/
    overflow: hidden;
}
.current{
    background-position: -24px -762px;
}
.slider-ctrl-prev,
.slider-ctrl-next{
    position: absolute;
    top:50%;
    margin-top:-35px;
    background-color: blue;
    background: url(../images/icon.png) no-repeat 6px top;
    width: 30px;
    height: 35px;
}

.slider-ctrl-prev{
    left:0;
    cursor: pointer;
}
.slider-ctrl-next{
    right: 0;
    background-position: -6px -44px;
    cursor: pointer;
}

JS部分
slider.js

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.className = "slider-ctrl-con";
        span.innerHTML = imgs.length - i;//由于span小方块是倒着插入，所以索引号也要是6 5 4 3 2 1
        slider_ctrl.insertBefore(span, slider_ctrl.children[1]);
        //insertBefore在参照的元素之前插入
    }
    var spans = slider_ctrl.children;  //得到所有的 span
    spans[1].setAttribute("class", "slider-ctrl-con current");
    //setAttribute() 方法添加指定的属性，并为其赋指定的值。这里制定类名，给它添加current类

    var scrollWidth = js_slider.clientWidth;  //得到大盒子的宽度  也就是后面后面动画走的距离

    //刚开始  第一张图片在框里  其余的图片框右边
    for (var i = 1; i < imgs.length; i++)  //图片从第二张开始排在框右边
    {
        imgs[i].style.left = scrollWidth + "px";
    }

    //遍历三个按钮
    // span是8个按钮  两个箭头  六个小方块
    var iNow=0;  //控制播放张数
    for(var k in spans)  //k在数组里是索引号  span[0]--第一个span
    {
        spans[k].onclick = function () {
            //点击span里的哪一个就输出对应的值  两个箭头符号值为空
            if (this.className == "slider-ctrl-prev") {
                // alert("你点击的是左侧按钮")
                animate(imgs[iNow], {left: scrollWidth});
                --iNow < 0 ? iNow = imgs.length - 1 : iNow;
                imgs[iNow].style.left = -scrollWidth + "px";
                animate(imgs[iNow], {left: 0});
                setSquare();
            } else if (this.className == "slider-ctrl-next") {
                // alert("你点击的是右侧按钮");
                animate(imgs[iNow], {left: -scrollWidth});
                //当前的那个图片 慢慢的走到 -scrollWidth位置
                ++iNow > imgs.length - 1 ? iNow = 0 : iNow;
                // iNow++;   //当前图片加1  先++
                // if(iNow>imgs.length-1)   //后判断
                // {
                //     iNow=0;
                // }
                imgs[iNow].style.left = scrollWidth + "px";  //下一张快速运动到右边310px的位子
                animate(imgs[iNow], {left: 0});  //下一张图片走到0的位置（框里）
                setSquare();
            }
            else {
                // alert(this.innerHTML);//下面的小span点击
                //首先要知道点击的是第几张--当前的索引号
                var that = this.innerHTML - 1;  //that对应每张图片的索引号
                if (that > iNow)
                {
                    //同右侧点击一样
                    animate(imgs[iNow], {left: -scrollWidth});
                    imgs[that].style.left = scrollWidth + "px";

                }
                else if(that < iNow)
                {  //同点击左侧一样
                    animate(imgs[iNow], {left: scrollWidth});
                    imgs[that].style.left = -scrollWidth + "px";
                }
                iNow=that;
                animate(imgs[iNow], {left: 0});
                setSquare();
            }
        }
    }
    //  一个可以控制 播放span 的 函数   当前
    function setSquare() {
        //  清除所有的span current   留下 满足需要的拿一个
        for(var i=1;i<spans.length-1;i++){   //  8个span   我们要 1-6  不要 7  索引号
            spans[i].className = "slider-ctrl-con";
        }
        spans[iNow+1].className = "slider-ctrl-con current";  // 记住 + 1
    }
    //定时器开始  右侧按钮
    var timer=null;
    timer = setInterval(autoplay,2000);  // 开启定时器
    function autoplay() {
        //  当我们点击时候， 当前的这张图片 先慢慢的走到左边  下一张 一定先快速走到右侧 （310）的位置，然后慢慢的走到舞台中
        // alert("您点击了右侧按钮");
        //iNow == 0
        animate(imgs[iNow],{left: -scrollWidth});
        // 当前的那个图片 慢慢的走到 -scrollWidth 位置
        // 变成1   先 ++   ++iNow  先自加  后 运算
        ++iNow > imgs.length -1 ?  iNow = 0 : iNow;
        imgs[iNow].style.left = scrollWidth + "px";  // 立马执行  快速走到右侧
        animate(imgs[iNow],{left: 0}); // 下一张走的 0 的位置  慢慢走过来
        setSquare();  // 调用square
    }
    //鼠标经过清除定时器
    js_slider.onmouseover = function() {
        clearInterval(timer);
    }
    js_slider.onmouseout = function() {
        clearInterval(timer);  // 要执行定时器 先清除定时器
        timer = setInterval(autoplay,2000);  // 开启定时器
    }
}


animate.js

/**
 * 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 浏览器
    }
}

猜你喜欢