原生JS实现轮播图

最新推荐文章于 2023-06-14 14:56:13 发布

Genius_S_

最新推荐文章于 2023-06-14 14:56:13 发布

阅读量1.5k

点赞数

分类专栏： html javascript 文章标签： javascript html

本文链接：https://blog.csdn.net/Genius_S_/article/details/47313837

版权

javascript 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

要求：
在和上一任务同一目录下面创建一个task0002_3.html文件，在js目录中创建task0002_3.js，并在其中编码，实现一个轮播图的功能。

图片数量及URL均在HTML中写好
可以配置轮播的顺序（正序、逆序）、是否循环、间隔时长
图片切换的动画要流畅
在轮播图下方自动生成对应图片的小点，点击小点，轮播图自动动画切换到对应的图片

效果示例：http://echarts.baidu.com/ 上面的轮播图（不需要做左右两个箭头）

html代码：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        div, ul, il, img, body
        {
            margin: 0px;
            padding: 0px;
        }

        #div1
        {
            position: relative;
            overflow: hidden;
            height: 500px;
            width: 1000px;
        }

            #div1 ul
            {
                position: relative;
            }

                #div1 ul li
                {
                    float: left;
                    list-style: none;
                }

                    #div1 ul li img
                    {
                        height: 300px;
                    }

        #btn
        {
            position: absolute;
            width: 100%;
            text-align: center; 
        }

            #btn a
            { 
                cursor: pointer; /*让鼠标移入的时候鼠标样式改变*/
                display: inline-block;
                width: 10px;
                height: 5px;
                background-color: #808080;
                margin-top:250px;
            }

                #btn a.active, #btn a:hover
                {
                    background-color: white;
                }
    </style>
</head>
<body>
    <div id="div1">
        <ul id="ul"><!--为了动画效果连贯 在列表开始加上末尾的图片 在列表末尾加上开始的一张图片-->
            <li>
                <img src="pic/3.jpg" /></li>
            <li>
                <img src="pic/1.jpg" /></li>
            <li>
                <img src="pic/2.jpg" /></li>
            <li>
                <img src="pic/3.jpg"/></li>
            <li>
                <img src="pic/1.jpgg" /></li>
        </ul>
        <div id="btn">
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
        </div>
    </div>
    <script src="js/task0002_3.js"></script>
    <script>
        window.onload = function () {
            var di = document.getElementById('div1');
            var ul = di.getElementsByTagName('ul')[0];
            var li = ul.getElementsByTagName('li');
            var img = ul.getElementsByTagName('img');
            var obtn = document.getElementById('btn');
            var aa = obtn.getElementsByTagName('a');
            var wid = screen.width;
            di.style.width = wid + 'px';
            function reSize() {//把图片的宽度调整到和屏幕宽度一致
                for (i = 0; i < li.length; i++) {
                    img[i].style.width = wid + 'px';
                }
                ul.style.width = wid * li.length + 'px';
            }
            reSize();
            changeBtnStyle(aa);
            aa[0].addEventListener("click", met1);
            aa[1].addEventListener("click", met2);
            aa[2].addEventListener("click", met3);
            setInterval(loop, 1000, 50, 1,3); //设置图片循环函数
            setInterval(changeBtn, 100, aa,ul);//每隔0.1秒获取当前图片的序号 并让其对应的按钮改变样式
        }
    </script>
</body>
</html>

Js代码：

// JavaScript source code
var wid = screen.width; //获取屏幕宽度
function getDis(ul) { //获取列表的偏移量
    var dis;
    if (ul.currentStyle) {
        dis = ul.currentStyle["left"];
    } else {
        var res = window.getComputedStyle(ul, null);
        dis = res["left"];
    }
    dis = parseInt(dis);
    return dis;
}
function getNum(ul) { //计算当前播放的是第几张图片
    var dis = getDis(ul);
    dis = parseInt(dis * -1 / wid);
    return dis;
}
function an(from, to, time) { //动画函数 from 是当前图片的序号 to代表目标图片序号 time为动画执行时间
    var speed = -(to - from) * wid / time; //计算图片的偏移速度
    var left = -from * wid;
    var interval;
    function move() {
        if (speed < 0) {  //当速度为负时 偏移量大于目标偏移量 则停止动画
            if (left > -to * wid) {
                ul.style.left = left + 'px';
                left += speed;
            }
            else {
                left = -to * wid;
                ul.style.left = left + 'px';
                clearInterval(interval);
            }
        }
        else {//当速度为正时 偏移量小于目标偏移量 则停止动画
            if (left < -to * wid) {
                ul.style.left = left + 'px';
                left += speed;
            }
            else {
                left = -to * wid;
                ul.style.left = left + 'px';
                clearInterval(interval);
            }
        }
    }
    interval = setInterval(move, 1); //循环播放
}
function getSec() {
    var now = new Date();
    return now.getSeconds(); //获取现在时间秒数
}
function click(aa) {  //给按钮添加点击事件 同时改变样式
    for (i = 0; i < aa.length; i++) {
        aa[i].onclick = function () {
            for (j = 0; j < aa.length; j++)
            { aa[j].className = ' ' }
            this.className = 'active'
        }
    }
}
function loop(time, dir, len) {
 //实现每隔固定时间循环  参数为 动画执行的时间，运动方向 +1为正方向 -1为负方向 len是当前图片列表的长度 当图片列表长度改变 修改len值即可
    var index = getNum(ul);
    var sec = getSec();
    if (sec % 5 == 0) { //设置为五秒循环一次
        if (dir > 0) { //方向为正时
            if (index < len) { 
                an(index, index + 1, time) 
            }
            else {//当动画到最后一张图片时，重第一张开始 
                an(1, 2, time);
            }
        }
        else { //方向为负
            if (index > 0) {
                an(index, index - 1, time)
            }
            else { //播放到第一张图片时 从最后一张重新开始
                an(len - 1, len - 2, time);
            }
        }
    }
}
function met1() { //按钮事件
    var dis = getNum(ul);
    an(dis, 1, 10);
}
function met2() { //按钮事件
    var dis = getNum(ul);
    an(dis, 2, 10);
}
function met3() { //按钮事件
    var dis = getNum(ul);
    an(dis, 3, 10);
}
function changeBtn(aa,ul) {  //改变按钮样式
    var index = getNum(ul) +2 ;
    index = index % aa.length; //获取当前图片对应的按钮序号
    for (j = 0; j < aa.length; j++) //先把所有按钮的样式置为空
    { aa[j].className = ' ' }
    aa[index].className = 'active' //给当前的按钮加上样式
}