轮播图之横向滚动

轮播图之横向滚动代码

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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值