首页轮播图

最新推荐文章于 2022-08-01 20:54:31 发布

置顶 jiepp

最新推荐文章于 2022-08-01 20:54:31 发布

阅读量979

点赞数

文章标签：轮播图

本文链接：https://blog.csdn.net/jiepp/article/details/101146235

版权

个人网站轮播图制作

网站首页轮播展示：

网页轮播图

编辑器制作效果展示：

在这里插入图片描述

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图最终版</title>
    <style>
        * {padding: 0;margin: 0}
        body {overflow: hidden;background-color: #eee}
        #dd {width: 100%;height: 600px}
        #d {position: absolute;margin: auto;top: 0;bottom: 0;height: 500px;width: 500%;transition: all 0.5s;left: 0}
        #d div {width: 20%;height: 500px;float: left}
        #d div {font-size: 30px;text-align: center;line-height: 500px;color: white;font-weight: bold}
        .s {display: inline-block;width: 60px;height: 100px;border-radius: 15px;background-color: #eee}
        .s3 {display: inline-block;width: 50px;height: 100px;text-align: center;line-height: 100px;font-size: 30px;transition: all 0.3s}
        .s1 {position: fixed;left: 10px;margin: auto;top: 0;bottom: 0}
        .s2 {position: fixed;right: 10px;margin: auto;top: 0;bottom: 0}
        .s1:hover span {color: #02B2B5;transform: translateX(-20px) scale(1.2)}
        .s2:hover span {color: #02B2B5;transform: translateX(20px) scale(1.2)}
    </style>
</head>
<body>
<div id="dd">
    <div id="d">
        <div style="background: url('img/AD0I_PnABRACGAAgqZyNywUoktzDLDCADzjQBQ.jpg') no-repeat;background-size:cover">
            <span>3</span></div>
        <div style="background: url('img/AD0I_PnABRACGAAgn5yNywUo7LXc7wcwgA840AU.jpg') no-repeat;background-size:cover">
            <span>1</span></div>
        <div style="background: url('img/AD0I_PnABRACGAAgqZyNywUoktzDLDCADzjQBQ.jpg') no-repeat;background-size:cover">
            <span>2</span></div>
        <div style="background: url('img/AD0I_PnABRACGAAgn5yNywUo7LXc7wcwgA840AU.jpg') no-repeat;background-size:cover">
            <span>3</span></div>
        <div style="background: url('img/AD0I_PnABRACGAAgqZyNywUoktzDLDCADzjQBQ.jpg') no-repeat;background-size:cover">
            <span>1</span></div>
    </div>
    <span class="s s1"><span class="s3">《</span></span>
    <span class="s s2"><span class="s3">》</span></span>
</div>
<script>
    var timer;
    var os1 = document.querySelector(".s1");
    var os2 = document.querySelector(".s2");
    var od = document.querySelector("#d");
    var odd = document.querySelector("#dd");
    os1.addEventListener("click", s1);
    os2.addEventListener("click", s2);
    // 左按钮方法
    function s1() {
        od.style.left = od.offsetLeft + od.offsetWidth / 5 + "px";
        console.log(od.offsetLeft);
        if (od.offsetLeft >= -od.offsetWidth / 5) {
            od.style.left = -od.offsetWidth / 5 * 3 + "px"
        }
    };
    // 右按钮方法
    function s2() {
        od.style.left = od.offsetLeft - od.offsetWidth / 5 + "px";
        console.log(od.offsetLeft);
        if (od.offsetLeft <= -od.offsetWidth / 5 * 3) {
            od.style.left = -od.offsetWidth / 5 + "px"
        }
    };
    // 添加轮播定时器
    function v() {
        clearInterval(timer);
        timer = setInterval(function () {
            cl();
            os2.click()
        }, 2000)
    };
    v();
    // 清除轮播定时器
    odd.addEventListener("mouseover", function () {
        clearInterval(timer)
    });
    // 实现定时器切换
    odd.addEventListener("mouseout", function () {
        v()
    });
    // 轮播关键代码--手动轮播
    od.addEventListener("mousedown", run);
    function run(e) {
        var e = e || event;
        // console.log("x"+ e.clientX+","+e.offsetX);
        // console.log("y"+ e.clientY+","+e.offsetY);
        var x = od.offsetLeft;
        var x1 = e.clientX;
        document.addEventListener("mousemove", run1);
        function run1(e) {
            var e = e || event;
            var x2 = e.clientX;
            var l = (x2 - x1) * 2;
            od.style.left = x + l + "px";
            if ((x + od.offsetWidth / 5) % (od.offsetWidth / 5) != 0) {
                od.style.left = -od.offsetWidth / 5 + "px"
            }
            if (l >= 300) {
                od.style.left = x + od.offsetWidth / 5 + "px"
            } else if (l <= -300) {
                od.style.left = x - od.offsetWidth / 5 + "px"
            } else {
                od.style.left = x + "px"
            }
            document.addEventListener("mouseup", function () {
                cl();
                document.removeEventListener("mousemove", run1)
            });
        };
        e.preventDefault()
    };
    // 关于轮播BUG的调整/不太完善待改进
    function cl() {
        if (od.offsetLeft >= -od.offsetWidth / 5) {
            od.style.left = -od.offsetWidth / 5 * 3 + "px"
        } else if (od.offsetLeft <= -od.offsetWidth / 5 * 3) {
            od.style.left = -od.offsetWidth / 5 + "px"
        }
    };
</script>
</body>
</html>

全部代码作于2019年-9月-21日

jiepp

关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
2
评论
首页轮播图

个人网站轮播图制作网站首页轮播展示：编辑器制作效果展示：代码展示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播图最终版</title> <style> * {pad...
复制链接

扫一扫