原生JS实现轮播图

来源：互联网发布：python 字节转字符串编辑：程序博客网时间：2024/06/08 03:17

要求：
在和上一任务同一目录下面创建一个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 codevar 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' //给当前的按钮加上样式}

0 0