tx5-网易轮播图

来源：互联网发布：java 遍历ftp文件夹编辑：程序博客网时间：2024/06/06 14:54

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-css.css部分

*{    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/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;}

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 < 0 ? iNow = imgs.length-1 : iNow;                imgs[iNow].style.left = -scrollWidth + "px";//立马执行，快速回到右侧                animate(imgs[iNow],{left:0}); //下一张走到0的位置，慢慢走过来                setSquare();            }else if(this.className == "slider-ctrl-next"){ //右侧按钮开始                autoplay();            }else{                // alert("点击了span下按钮");                // 我们首先要知道我们点击的是第几章图片，获得当前的索引号                var that = this.innerHTML - 1; //innerTHML是字符型，-1之后变成数字型。+1不行                if(that > iNow){                    //做法和右侧按钮相同                    animate(imgs[iNow],{left:-scrollWidth}); // 当前这张慢慢走出去                    imgs[that].style.left = scrollWidth + "px"; // 点击的那个索引号 快速走到右侧310                }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++){                spans[i].className = "slider-ctrl-con";        }        spans[iNow+1].className = "slider-ctrl-con current";    }    //定时器开始，定时器就是右侧按钮    var timer = null;    timer = setInterval(autoplay,2000);    function autoplay(){        //当我们点击的时候，当前这张图片 先慢慢的走到左边，下一张 一定先快速回到右侧，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的位置，慢慢走过来        setSquare();    }    //鼠标经过清除定时器    js_slider.onmouseover = function () {        clearInterval(timer);    }    js_slider.onmouseout = function () {        clearInterval(timer);        timer = setInterval(autoplay,2000);    }}

animate.js部分

//多属性运动框架function animate(obj,json,fn){    clearInterval(obj.timer);    obj.timer = setInterval(function(){        var flag = true; //用来判断是否停止定时器 一定要写在遍历外面        for(var attr in json){            var current = 0;            if(attr == "opacity"){                current =parseInt(getStyle(obj,attr)*100);            }else{                current =parseInt(getStyle(obj,attr));            }            //var current =parseInt(getStyle(obj,attr)); //数值            var step = (json[attr] - current) /10;            step = step>0 ? Math.ceil(step) : Math.floor(step);            if(attr == "opacity"){ //判断用户有没有输入opacity                if("opacity" in obj.style){ //判断浏览器是否支持opacity                    //obj.style.opacity = json[attr];                    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]){ //只要目标与json中任意一个值不等 就不能停止定时器 这个一定写在定时器里面                flag = false;            }        }        if(flag){            clearInterval(obj.timer);            if(fn){fn();}        }    },30);}function getStyle(obj,attr){ //获取属性值    if(obj.currentStyle){ //i3        return obj.currentStyle[attr];    }else{        return window.getComputedStyle(obj,null)[attr]; //w3c    }}

0 0