鼠标点击轮播图

最新推荐文章于 2022-11-29 20:30:00 发布

thinkasany

最新推荐文章于 2022-11-29 20:30:00 发布

阅读量401

点赞数 1

文章标签： javascript css html5

本文链接：https://blog.csdn.net/daddykei/article/details/106215768

版权

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0;}
        ul{list-style:none;}
        #box {
            width: 500px;
            height: 50px;
            padding-top: 360px;
            border:1px solid red;
            margin:100px auto;
            overflow: hidden;
            background: url(./static/img/fit1.jpg) no-repeat;
            background-size: 550px 550px;
        }
        #box ul{
            overflow: hidden;
            border-top:1px solid black;
        }
        #box li {
            width: 50px;
            height: 50px;
            float: left;
        }
        #box img{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="box">
    <ul>
        <li><img src="./static/img/fit1.jpg" alt=""/></li>
        <li><img src="./static/img/fit2.jpg" alt=""/></li>
        <li><img src="./static/img/fit3.jpg" alt=""/></li>
        <li><img src="./static/img/fit4.jpg" alt=""/></li>
    </ul>
</div>

</body>
<script>
    let timer;
    let box=document.querySelector("#box");
    let num=1;
    let myli=document.querySelectorAll("li");
    // console.log(myli);//  拿到的是数组 NodeList(4) [li, li, li, li] 0 ，1，2，3，4
    timer= setInterval(lunbo,2000);
    function lunbo()
    {
        num++;
        box.style.background="url(./static/img/fit"+num+"big.jpg) no-repeat";
        box.style.backgroundSize="550px ,550px";
        if (num==4)
        {
            num=0     回到第一张图开始
        }
    }
    box.onmouseover=function () {
        clearInterval(timer)
    };
    box.onmouseout=function () {
        timer=setInterval(lunbo,2000)
    };
    for (let i=0;i<myli.length;i++)
    {
        myli[i].onclick=function () {
            box.style.background="url(./static/img/fit"+(i+1)+"big.jpg) no-repeat";
            box.style.backgroundSize="550px ,550px";
        }
    }
</script>
</html>

thinkasany

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
鼠标点击轮播图

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin:0;padding:0;} ul{list-style:none;} #box { width: 500px; ..
复制链接

扫一扫