JavaScript几种轮播图实例

最新推荐文章于 2022-09-21 22:34:26 发布

　　初夏 ﻬ

最新推荐文章于 2022-09-21 22:34:26 发布

阅读量310

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_44329870/article/details/112385372

版权

本文介绍了使用JavaScript实现的三种轮播图效果，包括无缝轮播、带拖拽功能和带圆点指示器的轮播图。每种轮播图都有对应的代码示例和效果图展示。

摘要由CSDN通过智能技术生成

一.无缝轮播图

效果图：

在这里插入图片描述 代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
   
            margin: 0;
            padding: 0;
        }

        /*显示图片的容器*/
        .box {
   
            width: 500px;
            height: 150px;
            overflow: hidden;
        }

        /*可以放两份图片列表的容器*/
        .par {
   
            width: 1600px;
        }

        /*放所有图片的容器*/
        .child {
   
            float: left;
            width: 800px;
            height: 150px;
        }

        .child > img {
   
            width: 200px;
            height: 150px;
            float: left;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="par">
        <div class="child">
            <img src="./img/1.jpg" alt=""/>
            <img src="./img/2.jpg" alt=""/>
            <img src="./img/3.jpg" alt=""/>
            <img src="./img/4.jpg" alt=""/>
        </div>
    </div>
</div>
<script>
    var childele = document.querySelector(".child");//放所有图片的容器
    var par = document.querySelector(".par");//获取放置了两份图片列表的容器
    var box = document.querySelector(".box");//获取显示图片的容器
    var clone = childele.cloneNode(true);//克隆一份图片列表，不然衔接的时候能看到闪一下
    par.appendChild(clone);//追加进可以放置两份图片列表的容器

    var speed = 1;
    var timer = null;
    loop();
    function loop() {
   
        box.scrollLeft += speed;
        var left = box.scrollLeft;
        if (left >= 800) {
   
            box.scrollLeft = 0;//移动完所有图片之后再返回到一开始的地方
        }
        timer = setTimeout(loop, 10);
    }
</script>
</body>
</html>

二.带拖拽的轮播图

效果图：

在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
   
            margin: 0;
            padding: 0;
        }

        /*最外层的容器*/
        .banner {
   
            position: relative;
            width: 1000px;
            height: 230px;
            margin: 0 auto;
        }

        /*显示框的大小*/
        .menu {
   
            position: relative;
            width: 1000px;
            height: 230px;
            overflow: hidden;
            border: 1px solid red;
        }

        /*把所有图片放置两遍的容器*/
        .list {
   
            width: 6000px;
            height: 200px;
            border:  1px solid red;
        }

        /*把所有图放置一遍的容器*/
        .par {
   
            float: left;
            width: 3000px;
            height: 200px;
        }

        ul {
   
            float: left;
            width: 1000px;
            height: 200px;
        }

        ul li {
   
            list-style: none;
            width: 200px;
            height: 200px;
            text-align: center;
            line

最低0.47元/天解锁文章

　　初夏 ﻬ

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript几种轮播图实例

一.无缝轮播图效果图：代码：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } /*显示图片的容器*/
复制链接

扫一扫