tx5-网易轮播图

最新推荐文章于 2022-08-22 20:10:05 发布

原创最新推荐文章于 2022-08-22 20:10:05 发布 · 474 阅读

0 ·

CC 4.0 BY-SA版权

01前端基础教程html_css_js 专栏收录该内容

78 篇文章

订阅专栏

本文介绍了一个基于HTML、CSS和JavaScript实现的轮播图滑块动画案例，通过动画效果让图片在轮播中平滑过渡。代码中包含了HTML结构布局、CSS样式设置及JavaScript逻辑控制，实现了图片自动轮播及手动控制切换的功能。

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
    }
}