JavaScript的原生轮播图

html代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <link rel="stylesheet" href="./css/index.css">//这里是自己写的css样式
    <script src="./js/动画.js"></script>//这里是封装好的动画函数
</head>

<body>
    <div class="banner">
        <ul class="banner_img">
            <li><a href="javascript:;"><img src="./images/1.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="./images/2.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="./images/3.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="./images/4.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="./images/5.jpg" alt=""></a></li>
        </ul>
        <div class="btn">
            <span class="btn_left"></span>
            <span class="btn_right"></span>
        </div>
        <ul class="an">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

封装好的动画函数如下

//让元素进行动画
function animate(ele, target) {
    //要使用定时器，首先清除定时器
    //一个盒子只能有一个定时器，这样的话，不会和其他盒子的定时器起冲突
    //可以把定时器本身当作盒子的一个属性
    clearInterval(ele.timer);
    //要求盒子既能向左移动，又能向右移动，那么，就需要设置到底是左移还是右移
    //通过目标值来控制，如果目标值为正，就向右走
    var speed = target > ele.offsetLeft ? 10 : -10;
    //定制定时器
    ele.timer = setInterval(function () {
        //在执行之前就获取当前目标值和目标值的差
        var val = target - ele.offsetLeft;
        //当移动过程中，目标值和当前值得到的差小于步长的时候，就不动了
        //因为步长有正有负，所以要换成绝对值
        if (Math.abs(val) < Math.abs(speed)) {
            ele.style.left = target + "px";
        } else {
            ele.style.left = ele.offsetLeft + speed + "px";
        }
    }, 15)
}

css样式如下（写的不是很好见谅）：

* {
    margin: 0;
    padding: 0;
}

a,
ul,
li {
    font-style: normal;
    text-decoration: none;
    list-style: none;
}

img {
    display: block;
}

.banner {
    width: 500px;
    height: 200px;
    margin: 100px auto;
    position: relative;
    overflow: hidden;
}

.banner_img {
    display: flex;
    position: absolute;
}

.btn {
    position: absolute;
    top: 50%;
    width: 100%;
}

span.btn_left {
    position: absolute;
    background-image: url(../images/[email protected]);//这里的背景图是两边小按钮
    width: 22px;
    height: 37px;
    background-size: cover;
    transform: rotate(180deg);//因为我的小按钮是右箭头 所以这里需要旋转180度
    left: 4px;
}

span.btn_right {
    position: absolute;
    background-image: url(../images/[email protected]);//这里的背景图是两边小按钮
    width: 22px;
    height: 37px;
    background-size: cover;
    right: 4px;
}

.an {
    bottom: 10px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
}

.an li {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ccc;
    opacity: .4;
    float: left;
    margin: 2px 4px;
}

.an .active {
    background-color: #fff;
    opacity: 1;
}

接下来我们就要实现js轮播效果了

1.获取页面元素

2.声明全局变量

3.给小圆点添加事件

3.1 点击小圆点切换样式

3.2 点击小圆点切换图片

4.右侧按钮点击事件

4.1 点击按钮切换图片，切换小圆点样式

4.2 实现无缝原理

5.左侧按钮

6.自动轮播

  //1.获取元素
        var banner = document.querySelector(".banner");
        var banner_img = document.querySelector(".banner_img");
        var left = document.querySelector(".btn_left");
        var right = document.querySelector(".btn_right");
        var ul = document.querySelector('.an');
        //2.声明全局变量
        var num = 0;
        var circle = 0;
        //3.点击按钮改变样式；
        for (var i = 0; i < ul.children.length; i++) {
            ul.children[i].setAttribute('index', i)
            //获取ul下li标签的索引值
            ul.children[i].onclick = function () {
                //点击小按钮可切换图片
                num = circle = this.getAttribute('index');
                //申明的变量然后获取index当前索引值
                for (var j = 0; j < ul.children.length; j++) {
                    //排他，干掉所有人，留下自己
                    ul.children[j].classList.remove('active')
                    //当点击的时候，把之前的小按钮样式删掉
                }
                this.classList.add('active')//点击哪个小按钮给哪个小按钮添加样式
                animate(banner_img, -circle * banner.offsetWidth);
                //这是之前封装好的动画函数，直接调用，里面是图片的父级盒子，第二个值是我们提前声明好的全局变量乘以整个盒子的宽度
                //注意：要想切换图片 也可以使用图片自身的宽度，但不推荐使用;
            }
        }
        //4.实现点击左右按钮无缝滚动原理
        //要想实现无缝滚动的话 我们首先要添加第一张图片
        var first = banner_img.children[0].cloneNode(true);
        //把图片添加
        banner_img.appendChild(first);
        //点击右按钮向右滚动
        right.onclick = function () {
            num++;//先调用num 先自增
            if (num >= banner_img.children.length) {
                //判断num是否大于或等于轮播图子级的长度
                banner_img.style.left = 0;
                //则轮播图盒子向左移为0
                num = 1;
                //这边的num等于1是因为在上面我们添加了无缝滚动,这里num要等于1;
            }
            animate(banner_img, -num * banner.offsetWidth);
            //这是之前封装好的动画函数，直接调用，里面是图片的父级盒子，第二个值是我们这里调用的num全局变量乘以整个盒子的宽度
            circle++;//首先先递增
            if (circle >= ul.children.length) {
                //判断circle是否大于等于ul下面子级的长度；
                circle = 0;
                //则执行全局变量circle 这里要等于0
            }
            for (var j = 0; j < ul.children.length; j++) {
                //排他，干掉所有人，留下自己
                ul.children[j].classList.remove('active')
                //当点击的时候，把之前的小按钮样式删掉
            }
            ul.children[circle].classList.add('active')
            //点击哪个小按钮给哪个小按钮添加样式
        }//到这里我们的右按钮就可以实现无缝滚动原理了
        //左按钮点击如下
        left.onclick = function () {
            //到这里我们就不用再先给全局变量num自增了
            if (num <= 0) {
                //首先判断num是否小于等于0；注意这里必须是小于等于零  不然向左点击会出现空白的效果；
                num = ul.children.length;
                //如果判断成立，则num等于ul下子级的长度
                banner_img.style.left = -num * banner.offsetWidth + 'px';
                //轮播图向左移动等于负值num乘以整个盒子的宽度，记得后面加单位
            }
            num--;
            //最后我们再给num自减
            animate(banner_img, -num * banner.offsetWidth);

            circle--;
            //这里先给我们声明的circle全局变量自减
            if (circle < 0) {
                //判断circle是否小于0 这里不能小于等于0
                circle = ul.children.length - 1;
                //则circle等于ul下子级的长度
            }
            for (var j = 0; j < ul.children.length; j++) {
            //排他，干掉所有人，留下自己
                ul.children[j].classList.remove('active')
            //当点击的时候，把之前的小按钮样式删掉
            }
            ul.children[circle].classList.add('active')
            //点击哪个小按钮给哪个小按钮添加样式
        }
         setInterval(function () {
            right.click();
         }, 2000)
    </script>

这里就是我们左按钮的if判断如果num<0的效果所以一定要<=0;不然就如图下效果

JavaScript的原生轮播图

html代码如下：

封装好的动画函数如下

css样式如下（写的不是很好见谅）：

接下来我们就要实现js轮播效果了

图的话可以用自己的，但是css左右按钮的样式要自行更改

猜你喜欢

JavaScript的原生轮播图

html代码如下：

封装好的动画函数如下

css样式如下（写的不是很好 见谅）：

接下来我们就要实现js轮播效果了

图的话可以用自己的，但是css左右按钮的样式要自行更改

猜你喜欢

css样式如下（写的不是很好见谅）：