JS写一个最简单的无缝轮播图

最新推荐文章于 2024-08-30 11:20:32 发布

向前看傻帽儿

最新推荐文章于 2024-08-30 11:20:32 发布

阅读量1.2k

点赞数

分类专栏： JavaScript 文章标签： Web前端

本文链接：https://blog.csdn.net/qq_41557320/article/details/83022329

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style-type: none;
        }
        li {
            cursor: pointer;
        }
        img {
            vertical-align: middle;
        }
        .box {
            width: 480px;
            height: 300px;
            border: 1px solid gray;
            padding: 3px;
            margin: 100px auto;
        }
        .box .photo {
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        .box .photo ul.lunbo {
            width: 1000%;
            height: 100%;
            position: absolute;
        }
        .box .photo ul.lunbo li {
            float: left;
        }
        a {
            display: block;
        }
        img {
            width: 480px;
            height: 300px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="photo" id="photo">
        <ul id="lunbo" class="lunbo">
            <li><a href="#"><img src="images/1.jpg" alt="" /></a></li>
            <li><a href="#"><img src="images/2.jpg" alt="" /></a></li>
            <li><a href="#"><img src="images/3.jpg" alt="" /></a></li>
            <li><a href="#"><img src="images/4.jpg" alt="" /></a></li>
            <li><a href="#"><img src="images/5.jpg" alt="" /></a></li>
            <li><a href="#"><img src="images/6.jpg" alt="" /></a></li>
            <li><a href="#"><img src="images/1.jpg" alt="" /></a></li>
        </ul>
    </div>
</div>
<script src="js/common.js"></script>
<script>
    function f1(){
        //首先定义单位移动的距离
        var step=-20;
        //获取图片当前的位置
        var now=my$('lunbo').offsetLeft;
        //每次执行函数当前位置加上单位距离
        now+=step;
        //判断图片移动到了什么位置，如果移到了第七张图片也就是和第一张相同的那张，则立即变为初始位置，从新开始
        //否则设置图片的位置为now
        if(now<-2880){
            my$('lunbo').style.left=0+'px';
        }else {
            my$('lunbo').style.left = now + 'px';
        }
    }
    //使用定时器，让图片动起来，由于可能会清除定时器，所以这里不能用匿名函数
    var move=setInterval(f1,100);

    //鼠标悬浮图片停止移动，清除定时器
    my$('photo').onmouseover=function(){
        clearInterval(move);
    };
    //鼠标移出则继续移动，开始定时器
    my$('photo').onmouseout=function(){
        move=setInterval(f1,100);
    };
</script>
</body>
</html>

最终效果如下图片自动播放：
在这里插入图片描述