轮播图啊啊啊

最新推荐文章于 2024-07-23 18:15:45 发布

dundundunsis

最新推荐文章于 2024-07-23 18:15:45 发布

阅读量348

点赞数 8

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/dundundunsis/article/details/134887587

版权

html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    * {
        margin: 0;
        padding: 0;
    }


    #bigbox {
        overflow: hidden;
        width: 560px;
        height: 300px;
        margin-left: 600px;
    }

    #hidden {
        width: 11110px;
        height: 300px;
        display: flex;
        position: relative;
        flex-direction: row;
        display: inline-block;
        font-size:0 ;/*图片之间的缝隙消失*/
        
    }

    img {
        width: 560px;
        height: 300px;
        flex-shrink: 0;
    }

    #lt {
        z-index: 888;
        display: inline-block;
        margin-top: 0px;
        height: 300px;
        line-height: 300px;
        font-size: 20px;
        color: white;
        position: absolute;
        top: 0;
        flex-shrink: 0;
        display: none;
    }

    #gt {
        display: inline-block;
        left: 1140px;
        top: 0;
        height: 300px;
        line-height: 300px;
        font-size: 20px;
        position: absolute;
        color: white;
        flex-shrink: 0;
        display: none;
    }
</style>

<body>


    <div id="bigbox">
        <div id="lt">&lt;</div>
        <div id="hidden">
            
            <img src="https://ts2.cn.mm.bing.net/th?id=OIP-C.ja-L_FC01Xbzhqo4Rm3B8gHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2"
                alt="" id="img1">
            <img src="https://ts3.cn.mm.bing.net/th?id=OIP-C.sCLYtBNCTlCXHa7ujfRgBgHaGn&w=264&h=236&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2"
                alt="">
            <img src="https://ts3.cn.mm.bing.net/th?id=OIP-C.hZFCNMtSWiOwBv3jVI1ywAHaFj&w=288&h=216&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2"
                alt="">
                <img src="https://ts2.cn.mm.bing.net/th?id=OIP-C.ja-L_FC01Xbzhqo4Rm3B8gHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2"
                alt="" id="img1">

        </div>
        <div id="gt">&gt;</div>
    </div>
    <script src="./轮播图.js"></script>
</body>

</html>

js

var bigbox = document.querySelector("#bigbox")
var img = document.querySelector("img")
var img1 = document.querySelector("#img1")
var imgwidth = document.querySelector("img").offsetWidth
var hidden = document.querySelector("#hidden")
var lt = document.querySelector("#lt")
var gt = document.querySelector("#gt")



bigbox.onmouseover = function () {
    gt.style.display = "block"
    lt.style.display = "block"
    clearTimeout(timer)
}
bigbox.onmouseout = function () {
    gt.style.display = "none"
    lt.style.display = "none"
    lb()

}

let index = 0
lt.onclick = function () {
    if (index > 2) {
        index = 0
    }
    hidden.style.transiton = 5 + "s"
    index++
    var po = -560 * index
    left = po
    hidden.style.marginLeft = po + "px"

}
gt.onclick = function () {
    if (index > 1) {
        index = 0
    }
    hidden.style.transiton = 5 + "s"
    index++
    var qo = -560 * (index+1)
    left = qo
    hidden.style.marginLeft = qo + "px"

}

var left = 0
lb()
function lb() {
    hidden.style.transiton = "none"

    if (left < -1680) {
        left = 0
    }
    hidden.style.marginLeft = left + "px"
    var n = (left % 560 == 0&&left!=0) ? n = 3000 : n = 10
    left -= 10
    timer = setTimeout(lb, n)
}