前端学习之html+css+js制作旋转轮播图

最新推荐文章于 2024-10-12 19:51:27 发布

六个番茄

最新推荐文章于 2024-10-12 19:51:27 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： html css JavaScript 轮播图

本文链接：https://blog.csdn.net/liugefangqie/article/details/88093053

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

网页效果：
在这里插入图片描述
当鼠标移入时：左右两个按钮显示

HTML部分的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/css.css">
    <script type="text/javascript" src="js/index.js"></script>
    <script src="js/jquery1.0.0.1.js"></script>
</head>
<body>
    <div class="wrap" id="wrap">
        <div class="slide" id="slide">
            <ul>
                <li><a href="#"><img src="images/slidepic1.jpg" /></a></li>
                <li><a href="#"><img src="images/slidepic2.jpg" /></a></li>
                <li><a href="#"><img src="images/slidepic3.jpg" /></a></li>
                <li><a href="#"><img src="images/slidepic4.jpg" /></a></li>
                <li><a href="#"><img src="images/slidepic5.jpg" /></a></li>
            </ul>
            <div class="arrow" id="arrow">
                <a href="javascript:;" class="prev"></a>
                <a href="javascript:;" class="next"></a>
            </div>
        </div>
    </div>
</body>
</html>

css部分的代码：

@charset "UTF-8";
/*初始化  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;}

.wrap{
    width: 1200px;
    margin: 10px auto;

}
.slide{
    height: 500px;
    position: relative;

}
.slide li{
    position:absolute;
    left:200px;
    top:0;
}
.slide li img{
    width:100%;
}
.arrow{
    opacity: 0;
}
.prev,.next{
    width:76px;
    height:112px;
    position: absolute;
    top:50%;
    margin-top:-56px;
    background: url(../images/prev.png) no-repeat;
    z-index: 99;

}
.next{
    right: 0;
    background: url(../images/next.png);
}

JS部分的代码

window.function(){
    var json = [
        {   //  1
            width:400,
            top:70,
            left:50,
            opacity:20,
            z:2
        },
        {  // 2
            width:600,
            top:120,
            left:0,
            opacity:80,
            z:3
        },
        {   // 3
            width:800,
            top:100,
            left:200,
            opacity:100,
            z:4
        },
        {  // 4
            width:600,
            top:120,
            left:600,
            opacity:80,
            z:3
        },
        {   //5
            width:400,
            top:70,
            left:750,
            opacity:20,
            z:2
        }
    ];    

    //获取元素
    var slide=document.getElementById("slide");
    var liArr=slide.getElementsByTagName("li");
    var arrow=slide.children[1];
    var arrowChildren=arrow.children;

    //当鼠标移入slide的div中，透明度变为1
    slide.onmouseenter=function(){
        animate(arrow,{"opacity":100});
    }
    //当鼠标离开，透明度变为0
    slide.onmouseleave=function(){
        animate(arrow,{"opacity":0});
    }

    //为每个li标签赋值数据
    for(var i=0;i<liArr.length;i++){
        animate(liArr[i],{
            "width":json[i].width,
            "top":json[i].top,
            "left":json[i].left,
            "opacity":json[i].opacity,
            "zIndex":json[i].z
        });
    }

    //为左右两个按钮绑定事件
    for(var k in arrowChildren){
        arrowChildren[k].onclick=function(){
            if(this.className==="prev"){
                //当前的classname是prev时，为左侧，判定为true
                move(true);
            }else {
                move(false);
            }
        }
    }

    function move(bool){
        if(bool){
            //json.push();//在最后添加
            //json.pop();//删除最后一位
            //json.unshift();//在最前面添加
            //json.shift();//删除第一位

            //如果点击的按钮是左按钮，则数据赋值顺序应该是5的数据给1,方向为逆时针，删除5的数据，赋值给1
            json.unshift(json.pop());
        }else{
            //如果点击的按钮是右按钮，则数据赋值顺序应该是1的数据给5,方向为顺时针，删除1的数据，赋值给5
            json.push(json.shift());
        }
        for(var i=0;i<liArr.length;i++){
        animate(liArr[i],{
            "width":json[i].width,
            "top":json[i].top,
            "left":json[i].left,
            "opacity":json[i].opacity,
            "zIndex":json[i].z
        });
    }

    }

}

jQuery封装的代码：

/**
 * Created by Lenovo on 2016/9/11.
 */
function show(ele){
    ele.style.display = "block";
}

/**
 * 获取元素样式兼容写法
 * @param ele
 * @param attr
 * @returns {*}
 */
function getStyle(ele,attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(ele,null)[attr];
    }
    return ele.currentStyle[attr];
}

//参数变为3个
function animate(ele,json,fn){
    //先清定时器
    clearInterval(ele.timer);
    ele.timer = setInterval(function () {
        //开闭原则
        var bool = true;


        //遍历属性和值，分别单独处理json
        //attr == k(键)    target == json[k](值)
        for(var k in json){
            //四部
            var leader = parseInt(getStyle(ele,k)) || 0;
            //1.获取步长
            var step = (json[k] - leader)/10;
            //2.二次加工步长
            step = step>0?Math.ceil(step):Math.floor(step);
            leader = leader + step;
            //3.赋值
            ele.style[k] = leader + "px";
            //4.清除定时器
            //判断: 目标值和当前值的差大于步长，就不能跳出循环
            //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。
            if(json[k] !== leader){
                bool = false;
            }
        }

        console.log(1);
        //只有所有的属性都到了指定位置，bool值才不会变成false；
        if(bool){
            clearInterval(ele.timer);
            //所有程序执行完毕了，现在可以执行回调函数了
            //只有传递了回调函数，才能执行
            if(fn){
                fn();
            }
        }
    },1);
}



//获取屏幕可视区域的宽高
function client(){
    if(window.innerHeight !== undefined){
        return {
            "width": window.innerWidth,
            "height": window.innerHeight
        }
    }else if(document.compatMode === "CSS1Compat"){
        return {
            "width": document.documentElement.clientWidth,
            "height": document.documentElement.clientHeight
        }
    }else{
        return {
            "width": document.body.clientWidth,
            "height": document.body.clientHeight
        }
    }
}