【前端】实现旋转木马轮播图·教程

文章目录效果图：需求分析：源代码：所用图片：效果图：需求分析：页面打开的时候，每个li缓动到相应位置鼠标移入slide，箭头显示鼠标点击prev按钮，显示上一张鼠标点击next按钮，显示下一张源代码：HTML部分<div class="wrap" id="wrap"><div class="slide" id="slide"><ul><li><

一颗不甘坠落的流星

996人浏览 · 2021-02-03 21:17:03

一颗不甘坠落的流星 · 2021-02-03 21:17:03 发布

文章目录

效果图：

在这里插入图片描述

需求分析：

页面打开的时候，每个li缓动到相应位置
鼠标移入slide，箭头显示
鼠标点击prev按钮，显示上一张
鼠标点击next按钮，显示下一张

源代码：

HTML部分

<div class="wrap" id="wrap">
    <div class="slide" id="slide">
        <ul>
            <li><a href="#"><img src="images/1.webp" alt="" /></a></li>
            <li><a href="#"><img src="images/2.webp" alt="" /></a></li>
            <li><a href="#"><img src="images/3.jpg" alt="" /></a></li>
            <li><a href="#"><img src="images/4.webp" alt="" /></a></li>
            <li><a href="#"><img src="images/5.jpg" alt="" /></a></li>
        </ul>
        <div class="arrow" id="arrow">
            <a href="javascript:;" class="prev" id="prev"></a>
            <a href="javascript:void(0);" class="next" id="next"></a>
        </div>
    </div>
</div>

css部分

<style>
 *{
    margin:0;
    padding:0
}
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:100px auto;
}
.slide {
    height:500px;
    position: relative;
}
.slide li{
    position: absolute;
    left:200px;
    top:0;
    /* 为了兼容ie */
    opacity:1;
}
.slide li img{
    width:100%;
}
.arrow{
    opacity: 0;
    position: relative;
    z-index:100;
}
.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-image: url(./images/next.png);
}   
</style>

JavaScript部分

为了简化代码，先封装一些常用的自定义构造函数

<script>
// 返回指定dom节点的attr样式值
function getStyle(dom, attr) {
    if (window.getComputedStyle) {// 是否有getComputedStyle方法
        //非IE低版
        return window.getComputedStyle(dom, null)[attr];
    } else {
        //IE低版
        return dom.currentStyle[attr];
    }  
 }  
// 多属性缓动
function animate(dom, json, callback) {
    clearInterval(dom.timer)
    // 要运动要定时器
    dom.timer = setInterval(function () {
        // 每20毫秒
        var flag = true;
        // json有几个属性，就要运动几次
        for (var attr in json) {
            // 1 获取当前位置
            if (attr == "opacity") {
                // 透明度在获取当前值的是要乘100
                var current = parseInt(getStyle(dom, attr) * 100);
            } else {
                var current = parseInt(getStyle(dom, attr));
            }
            // 2 计算速度
            var speed = json[attr] - current > 0 ? Math.ceil((json[attr] - current) / 10) : Math.floor((json[attr] - current) / 10)
            // 3 计算下一个位置
            if (attr == "zIndex") {
                var next = json[attr];
            } else {
                var next = current + speed;
            }
            // 4 定位元素
            if (attr == "zIndex") {
                dom.style[attr] = next;
            } else if (attr == "opacity") {
                dom.style.opacity = next / 100;
                dom.style.filter = "alpha(opacity=" + next + ")";
            } else {
                dom.style[attr] = next + "px";
            }
            // 判断是否到达目标
            if (next != json[attr]) {
                flag = false;
            }
            if (flag) {
              clearInterval(dom.timer);
            }
        }
    }, 20)
}
</script>

js主体部分，需要用到封装的函数，调用即可

<script>
 var json = [
    {
        "width": 400,
        "top": 20,
        "left": 50,
        "opacity": 20,
        "zIndex": 2
    },
    {
        "width": 600,
        "top": 70,
        "left": 0,
        "opacity": 80,
        "zIndex": 3
    },
    {
        "width": 800,
        "top": 100,
        "left": 200,
        "opacity": 100,
        "zIndex": 4
    },
    {
        "width": 600,
        "top": 70,
        "left": 600,
        "opacity": 80,
        "zIndex": 3
    },
    {
        "width": 400,
        "top": 20,
        "left": 750,
        "opacity": 20,
        "zIndex": 2
    }
]
// 获取相关元素
var arrow = document.getElementById('arrow');//箭头所在容器
var prevBtn = document.getElementById('prev');//上一个按钮
var nextBtn = document.getElementById('next');//下一个按钮
var slideDiv = document.getElementById('slide');//容器
var liArr = slideDiv.children[0].children;//所有li集合
// 根据json显示li
function show() {
    for (var i = 0; i < liArr.length; i++) {
        animate(liArr[i], json[i])
    }
}
// 1 页面打开的时候，每个li缓动到相应位置
show()
// 2 鼠标移入slide，箭头显示
slideDiv.onmouseenter = function(){
	arrow.style.opacity = 1;//ie高版本
	arrow.style.filter = "alpha(opacity=100)"//ie低版本
}
// 3 鼠标点击prev按钮，显示上一张
prevBtn.onclick = function () {
    // 把json：j0 j1 j2 j3 j4
    // 变成：  j1 j2 j3 j4 j0
    var obj = json.shift();
    json.push(obj);
    show();
}
// 4 鼠标点击next按钮，显示下一张
nextBtn.onclick = function () {
    // 把json：j0 j1 j2 j3 j4
    // 变成：  j4 j0 j1 j2 j3  
    var obj = json.pop();
    json.unshift(obj)
    show();
}
</script>

总代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        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: 100px auto;
        }
        .slide {
            height: 500px;
            position: relative;
        }
        .slide li {
            position: absolute;
            left: 200px;
            top: 0;
            /* 为了兼容ie */
            opacity: 1;
        }
        .slide li img {
            width: 100%;
        }
        .arrow {
            opacity: 0;
            position: relative;
            z-index: 100;
        }
        .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-image: url(./images/next.png);
        }
    </style>
</head>

<body>
    <div class="wrap" id="wrap">
        <div class="slide" id="slide">
            <ul>
                <li><a href="#"><img src="images/1.webp" alt="" /></a></li>
                <li><a href="#"><img src="images/2.webp" alt="" /></a></li>
                <li><a href="#"><img src="images/3.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/4.webp" alt="" /></a></li>
                <li><a href="#"><img src="images/5.jpg" alt="" /></a></li>
            </ul>
            <div class="arrow" id="arrow">
                <a href="javascript:;" class="prev" id="prev"></a>
                <a href="javascript:void(0);" class="next" id="next"></a>
            </div>
        </div>
    </div>
    <script>
        // 返回指定dom节点的attr样式值
        function getStyle(dom, attr) {
            if (window.getComputedStyle) {// 是否有getComputedStyle方法
                //非IE低版
                return window.getComputedStyle(dom, null)[attr];
            } else {
                //IE低版
                return dom.currentStyle[attr];
            }
        }
        // 多属性缓动
        function animate(dom, json, callback) {
            clearInterval(dom.timer)
            // 要运动要定时器
            dom.timer = setInterval(function () {
                // 每20毫秒
                var flag = true;
                // json有几个属性，就要运动几次
                for (var attr in json) {
                    // 1 获取当前位置
                    if (attr == "opacity") {
                        // 透明度在获取当前值的是要乘100
                        var current = parseInt(getStyle(dom, attr) * 100);
                    } else {
                        var current = parseInt(getStyle(dom, attr));
                    }
                    // 2 计算速度
                    var speed = json[attr] - current > 0 ? Math.ceil((json[attr] - current) / 10) : Math.floor((json[attr] - current) / 10)
                    // 3 计算下一个位置
                    if (attr == "zIndex") {
                        var next = json[attr];
                    } else {
                        var next = current + speed;
                    }
                    // 4 定位元素
                    if (attr == "zIndex") {
                        dom.style[attr] = next;
                    } else if (attr == "opacity") {
                        dom.style.opacity = next / 100;
                        dom.style.filter = "alpha(opacity=" + next + ")";
                    } else {
                        dom.style[attr] = next + "px";
                    }
                    // 判断是否到达目标
                    if (next != json[attr]) {
                        flag = false;
                    }
                    if (flag) {
                        clearInterval(dom.timer);
                    }
                }
            }, 20)
        }
        var json = [
            {
                "width": 400,
                "top": 20,
                "left": 50,
                "opacity": 20,
                "zIndex": 2
            },
            {
                "width": 600,
                "top": 70,
                "left": 0,
                "opacity": 80,
                "zIndex": 3
            },
            {
                "width": 800,
                "top": 100,
                "left": 200,
                "opacity": 100,
                "zIndex": 4
            },
            {
                "width": 600,
                "top": 70,
                "left": 600,
                "opacity": 80,
                "zIndex": 3
            },
            {
                "width": 400,
                "top": 20,
                "left": 750,
                "opacity": 20,
                "zIndex": 2
            }
        ]
        // 获取相关元素
        var arrow = document.getElementById('arrow');//箭头所在容器
        var prevBtn = document.getElementById('prev');//上一个按钮
        var nextBtn = document.getElementById('next');//下一个按钮
        var slideDiv = document.getElementById('slide');//容器
        var liArr = slideDiv.children[0].children;//所有li集合
        // 根据json显示li
        function show() {
            for (var i = 0; i < liArr.length; i++) {
                animate(liArr[i], json[i])
            }
        }
        // 1 页面打开的时候，每个li缓动到相应位置
        show();
        // 2 鼠标移入slide，箭头显示
        slideDiv.onmouseenter = function () {
            arrow.style.opacity = 1;//ie高版本
            arrow.style.filter = "alpha(opacity=100)"//ie低版本
        }
        // 3 鼠标点击prev按钮，显示上一张
        prevBtn.onclick = function () {
            // 把json：j0 j1 j2 j3 j4
            // 变成：  j1 j2 j3 j4 j0
            var obj = json.shift();
            json.push(obj);
            show();
        }
        // 4 鼠标点击next按钮，显示下一张
        nextBtn.onclick = function () {
            // 把json：j0 j1 j2 j3 j4
            // 变成：  j4 j0 j1 j2 j3  
            var obj = json.pop();
            json.unshift(obj);
            show();
        }
    </script>
</body>

</html>