亲宝软件园·资讯

展开

轮播图的实现 关于JavaScript轮播图的实现

靠技术吃饭 人气:0
想了解关于JavaScript轮播图的实现的相关内容吗,靠技术吃饭在本文为您仔细讲解轮播图的实现的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:JavaScript轮播图的实现,JavaScript,轮播图的实现,下面大家一起来学习吧。

今天又是一个非常实用的案例哟,听名字就觉得高级很难对吧,今天就来写一个案例,让你轻松学到轮播图的精髓!!

 还是老规矩,来看一下实现效果!!

学习轮播图的首先是要把图片准备好,并且用 ul 的里面的 li 包起来,给 li 一个浮动,让他们显示在一行上,但是注意了,一定要给 ul 足够的宽哦!!

来吧,html 和 css 代码如下所示(文件名:index.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>Document</title>
    <script src="animate.js"></script>
    <script src="轮播图.js"></script>
    <style>
        body {
            background-color: rgb(151, 147, 147);
        }
 
        * {
            margin: 0;
            padding: 0;
        }
 
        div {
            overflow: hidden;
            position: relative;
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin: 20px auto;
        }
 
        ul {
            list-style: none;
        }
 
        .img {
            width: 600%;
            position: absolute;
            left: 0;
        }
 
        li {
            float: left;
        }
 
        img {
            width: 500px;
            height: 500px;
        }
 
        .yuan>li {
            cursor: pointer;
            width: 10px;
            height: 10px;
            background-color: rgb(190, 185, 185);
            border-radius: 50%;
            margin: 0 5px;
            border: 1px solid rgb(119, 114, 114);
        }
 
        .yuan {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
        }
 
        .yuan .color {
            background-color: rgb(228, 135, 135);
        }
 
        a {
            text-decoration: none;
            color: black;
            background-color: rgb(112, 111, 111);
            display: inline-block;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            display: none;
        }
 
        .left {
            left: 0;
        }
 
        .right {
            right: 0;
        }
    </style>
</head>
 
<body>
    <div class="box">
        <ul class="img">
            <li><img src="images/1.webp" alt=""></li>
            <li><img src="images/2.jpg" alt=""></li>
            <li><img src="images/3.webp" alt=""></li>
            <li><img src="images/4.webp" alt=""></li>
            <li><img src="images/5.webp" alt=""></li>
        </ul>
        <a href="JavaScript:;" rel="external nofollow" rel="external nofollow" class="left">&lt;</a>
        <a href="JavaScript:;" rel="external nofollow" rel="external nofollow" class="right">></a>
        <ul class="yuan"></ul>
    </div>
</body>
 
</html>

这样写好以后,一个基本的样子就算是有了。

接下来就是让他动起来,想想什么可以让图片动起来,是不是我们学过的动画效果呀,所有这个地方要用缓动动画来实现一个切换图片的效果,因为 js 代码较多,所以得新建一个 js 文件,把代码封装起来!

下面就是封装得 js 代码 (文件名:轮播图.js)

window.addEventListener('load', function () {
    var img = document.querySelector('.img');
    var yuan = document.querySelector('.yuan');
    var box = document.querySelector('.box');
    var left = document.querySelector('.left');
    var right = document.querySelector('.right');
    var imgwidth = box.offsetWidth;  //获取盒子的宽度(图片的宽度)
    // 经过鼠标触发 停止自动滚动图片效果
    box.addEventListener('mouseenter', function () {
        left.style.display = 'block';
        right.style.display = 'block';
        clearInterval(timer);
    })
    // 离开鼠标触发 自动滚动图片再次触发
    box.addEventListener('mouseleave', function () {
        left.style.display = 'none';
        right.style.display = 'none';
        timer = setInterval(function () {
            right.click();
        }, 2000)
    })
    // 根据图片添加下面的小圆点
    for (var i = 0; i < img.children.length; i++) {
        var li = document.createElement('li');
        yuan.appendChild(li);
        li.setAttribute('date-index', i);
        li.addEventListener('click', function () {
            for (var j = 0; j < yuan.children.length; j++) {
                yuan.children[j].className = '';
            }
            this.className = 'color';
            var index = this.getAttribute('date-index');
            var imgwidth = box.offsetWidth;
            // animate(obj,target,function(){})
            animate(img, -index * imgwidth);
            nums = index;
            colors = index;
        })
    }
    // 默认第一个小圆点有颜色
    yuan.children[0].className = 'color';
    var nums = 0;
    var colors = 0;
    // 复制第一张图片到最后,给无缝滚动做准备
    var li = img.children[0].cloneNode(true);
    img.appendChild(li);
    var flag = true;
    //右边按钮,切换下一张,小圆点一起变化
    right.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (nums == img.children.length - 1) {
                nums = 0;
                img.style.left = 0;
            }
            nums++;
            animate(img, -nums * imgwidth, function () {
                flag = true;
            });
            colors++;
            if (colors == yuan.children.length) {
                colors = 0;
            }
            for (var j = 0; j < yuan.children.length; j++) {
                yuan.children[j].className = '';
            }
            yuan.children[colors].className = 'color';
        }
    })
    // 左边按钮,切换下一张,小圆点一起变化
    left.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (nums == 0) {
                nums = img.children.length - 1;
                img.style.left = -nums * imgwidth + 'px';
            }
            nums--;
            colors--;
            animate(img, -nums * imgwidth, function () {
                flag = true;
            });
            if (colors < 0) {
                colors = yuan.children.length - 1;
            }
            // if (colors == 0) {
            //     colors = yuan.children.length;
            // }
            // colors--;
            for (var j = 0; j < yuan.children.length; j++) {
                yuan.children[j].className = '';
            }
            yuan.children[colors].className = 'color';
        }
    })
    // 鼠标不经过图片实现自动滚动
    var timer = setInterval(function () {
        right.click();
    }, 2000)
})


关键的来了,要让动起来怎么少得了动画效果呢,我单独封装了一个 js 文件,这样以后写其他案例的时候也可以直接引用了。

代码如下(文件名:animate.js)

function animate(obj, target, callback) {  //移动的对象(谁移动),移动的目的位置,回调函数
    // 先清除以前的定时器,只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        // 步长写到定时器里面
        var step = (target - obj.offsetLeft) / 10; //步长公式:(目标位置-现在的位置)/10
        step = step > 0 ? Math.ceil(step) : Math.floor(step); //步长改为整数,不要出现小数,正数向上取整,负数向下取整
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer)  //停止动画,本质是停止定时器
            if (callback) {
                callback(); // 回调函数写到定时器结束里面
            }
        }
        //步长作为一个慢慢变小的值才能实现从快到慢的缓动停止的效果
        obj.style.left = obj.offsetLeft + step + 'px';
    },15)
}


基本上都用注释写清楚了,应该能每一步都看得懂了。

加载全部内容

相关教程
猜你喜欢
用户评论