轮播图之横向滚动

最新推荐文章于 2023-03-29 22:33:16 发布

不归少年

最新推荐文章于 2023-03-29 22:33:16 发布

阅读量2.3k

点赞数 2

分类专栏： javascript

本文链接：https://blog.csdn.net/Wang_jiao_yaa/article/details/99710692

版权

javascript 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

轮播图之横向滚动代码

html+css

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>横向滚动轮播图</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .content {
            width: 400px;
            height: 300px;
            margin: auto;
            border: solid 1px gray;
            overflow: hidden;
            position: relative;
        }

        .all {
            width: 2800px;
            height: 300px;
            position: absolute;
        }

        .shopshow {
            width: 400px;
            height: 300px;
            float: left;
        }

        img {
            width: 100%;
            height: 100%;
        }

        .tras {
            transition: left 0.5s ease-in;
        }

        .circle {
            width: 120px;
            height: 12px;
            font-size: 0;
            line-height: 12px;
            position: absolute;
            bottom: 20px;
            left: 140px;
        }

        .circle>div {
            border: solid 2px #fff;
            border-radius: 50%;
            width: 8px;
            height: 8px;
            display: inline-block;
            margin: 0 4px;
        }

        .bgc {
            background-color: #fff;
        }

        .btn {
            position: absolute;
            width: 100%;
            height: 30px;
            top: 125px;
            left: 0;
        }

        .btn>div:nth-child(1) {
            width: 30px;
            height: 30px;
            background-color: #e2e2e2;
            border-radius: 0 50% 50% 0;
            text-align: center;
            line-height: 30px;
            float: left;
            font-size: 18px;
            color: #a89c9c;
        }

        .btn>div:nth-child(2) {
            width: 30px;
            height: 30px;
            background-color: #e2e2e2;
            border-radius: 50% 0 0 50%;
            text-align: center;
            line-height: 30px;
            float: right;
            font-size: 18px;
            color: #a89c9c;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="all tras" style="left: 0"><!--transition里过渡的属性需要先声明一个初始值-->
            <div class="shopshow"><img src="img/1.jpg" alt=""></div>
            <div class="shopshow"><img src="img/2.jpg" alt=""></div>
            <div class="shopshow"><img src="img/3.jpg" alt=""></div>
            <div class="shopshow"><img src="img/4.jpg" alt=""></div>
            <div class="shopshow"><img src="img/5.jpg" alt=""></div>
            <div class="shopshow"><img src="img/6.jpg" alt=""></div>
            <div class="shopshow"><img src="img/1.jpg" alt=""></div>
        </div>
        <div class="circle">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="btn">
            <div>
                <</div> <div>>
            </div>
        </div>
    </div>
    </body>

</html>

js

获取元素

//获取元素
        var all = document.getElementsByClassName("all")[0];
        var shopshow = document.getElementsByClassName("shopshow");
        var content = document.getElementsByClassName("content")[0];
        var count = 0; //改变left
        var img = document.getElementsByTagName("img")[0];
        var length = parseInt(window.getComputedStyle(img).width);
        var speed = 1000; //计时器速度
        var circle = document.getElementsByClassName("circle")[0].children;
        var index = 0; //圆点索引  与count关联
        var timer = null; //计时器名称
        var btn = document.getElementsByClassName("btn")[0].children;

图片水平移动

//图片水平移动
        function move() {
            all.className = "all tras";
            count += 1;
            all.style.left = -(count * length) + "px";
            // 前一张过渡完，判断count是否大于等于6，如果是的话，图7到图1就去掉过渡，直接变成图1的位置，count=0；
            setTimeout(function () {
            //console.log(1);  总是在前一张图片过渡完 输出了1
                if (count >= shopshow.length - 1) {
                    all.className = "all";
                    count = 0;
                    all.style.left = "0px";
                }
                //控制台输出count，count值就是当前图片的索引
                index = count;
                addcolor();
            }, 500);//延迟的时间等于动画过渡的时间
        }

在这里插入图片描述
在对父盒子取消overflow：hidden属性，观察，在第六张过渡完之后，到了第七张图片后很快速的切换到了图1的位置

       //轮播动画
        function animate() {
            timer = setInterval(function () {
                move();
            }, speed);
        }

        //小圆点
        function addcolor() {
            for (var i = 0; i < circle.length; i++) {
                if (i == index) {
                    circle[i].className = "bgc";
                } else {
                    circle[i].className = "";
                }
            }

        }

        //加载之后
        window.onload = function () {
            animate();
            addcolor(); //方法一开始就需要调用，以此获取index值

            //鼠标进入与离开
            content.onmouseenter = function () {
                clearInterval(timer);
            }
            content.onmouseleave = function () {
                animate();
            }

            //圆点 碰到的圆点变色，变成相应的图片，移出，从该点继续向后轮播
            for (var i = 0; i < circle.length; i++) {
            //圆点索引的一一对应
                circle[i].index = i;
                circle[i].onmouseenter = function () {
                    //相应圆点颜色  把索引赋值给index  与addcolor()关联
                    index = this.index;
                    addcolor();
                    //对应图片
                    count = index -
                    1; //图片的left值是索引的length，图片的left是在count+1后执行的，所以需要count-1，因为count=index，所以需要index-1
                    move();
                }

            }
            //btn事件
            //鼠标点击右边，图片向左边，点向右，正常走向
            //鼠标点击左边，图片向右走，点向左
            btn[0].onclick = function () {
                move();
            }
            btn[1].onclick = function () {
                //图片  
                count--;
                if (count < 0) {
                    all.className = "all"
                    count = shopshow.length - 2; //图片种类个数
                    all.style.left = "-2400px";
                }
                //settimeout 延迟一点时间执行，方便最后一张到第一张的过渡,不然刚取消过渡又开始过渡。。。
                setTimeout(function () {
                    all.className = "all tras";
                    all.style.left = (-count * length) + "px";
                }, 1);
                //小圆点 settimeout让小圆点在图片变化之后再改变颜色
                setTimeout(function () {
                    index = count;
                    addcolor();
                }, 500);

            }
        }

效果展示

一、自然轮播、按钮点击

在这里插入图片描述

二、鼠标进入与离开

在这里插入图片描述

三、圆点相关

在这里插入图片描述

不归少年

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
轮播图之横向滚动

轮播图之横向滚动代码html+css<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt...
复制链接

扫一扫