学习笔记-原生JS实现轮播图

最新推荐文章于 2022-07-06 17:17:56 发布

Dream2076

最新推荐文章于 2022-07-06 17:17:56 发布

阅读量258

点赞数

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/Dream2076/article/details/84619234

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

学习笔记-原生JS实现轮播图

这几天在学习前端的相关知识，想到写一个轮播图练练手。本本章基于下面的这篇博文。
如何用原生JS实现简单轮播图（仿京东商城效果）
但是在实际项目中轮播图中的图片和数量是不确定的。
所以图片<img>和 小圆点<span>还有图片所在的<div>的宽度是要在js代码里动态生成。

根据图片个数生成对应`<img>`数量和所在`<div>`的宽度：

var list = document.getElementById('list');//<img>所在的div
var imglist = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];
window.onload = funcation(){
 	function $(id) {return document.getElementById(id);}
 	//设置所在<div>的宽度
 	list.setAttribute("style","width:"+(imglist.length*600)+"px; left: 0px;");
 	//动态加载图片
   	for(var i=0;i<imglist.length;i++){
    	var img = document.createElement("img");//生成img标签
        list.appendChild(img);
        (list.children)[i].setAttribute("src",imglist[i]);//给img标签设置图片
    }
 }

这里我们新建一个imglist来存所有的图片，在window.onload中根据imglist中图片的个数来生成<img>标签,然后通过setAttribute方法来设置属性。

根据图片个数生成对应`<span>`小圆点：

//动态生成轮播图小圆点
var cicle = document.createElement("div");
cicle.setAttribute("id", "buttons");
for (var i = 0; i < imglist.length; i++) {
    var span = document.createElement("span");
    // span.innerHTML = i + 1;
    cicle.appendChild(span);
}
$("container").appendChild(cicle);

var spanChildren = cicle.children;
spanChildren[0].setAttribute("class", "on");
for (var i = 0; i < spanChildren.length; i++) {
	//设置点击事件
   spanChildren[i].setAttribute("onclick", "spanClick(" + i + ")");
}
//小圆点已经添加完成了，可以进行赋值
var buttons = document.getElementById("buttons").getElementsByTagName('span');
bts = buttons;

先生成小圆点所在的<div>,设置id为buttons，再创建小圆点<span><小圆点的个数等于图片的数量，把这个div加到整个轮播图的最外层的<div>中，然后给第一个小圆点增加class样式(因为首先显示的是第一张)，给所有的小圆点增加点击事件。

然后还有其他的修改在源码里查看吧，在css文件里，可以把list的样式中的width注释掉

源码：

<!DOCTYPE html>
<html>
<!-- 实现了动态添加小圆点  -->

<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <link rel="stylesheet" href="css/style.css" />
</head>

<body>
    <div id="container">
        <!--图片-->
        <div id="list" style="left: 0px;">
            <!-- <img src="img/1.jpg" />
            <img src="img/2.jpg" />
            <img src="img/3.jpg" />
            <img src="img/4.jpg" />
            <img src="img/5.jpg" /> -->
        </div>
        <!--圆点按钮-->
        <!-- <div id="buttons">
            <span index="1" class="on"></span>
            <span index="2"></span>
            <span index="3"></span>
            <span index="4"></span>
            <span index="5"></span>
        </div> -->
        <!--左右切换按钮-->
        <a href="javascript:;" id="prev" class="arrow">&lt;</a>
        <a href="javascript:;" id="next" class="arrow">&gt;</a>
    </div>
    <script>
        var timer;
        var index = 0;
        var list = document.getElementById('list');
        var prev = document.getElementById('prev');
        var next = document.getElementById('next');
        var container = document.getElementById('container');
        // var buttons = document.getElementById('buttons').getElementsByTagName('span');
        //因为小圆点换成了动态的了，所以在窗口加载过程(window.onload)中给bts赋值。
        //要等到小圆点全部添加完成后才能进行赋值。
        var bts;
        //假数据
        var imglist = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];
        //600是这个图片的宽度
       
        window.onload = function () {
            function $(id) {
                return document.getElementById(id);
            }
            list.setAttribute("style","width:"+(imglist.length*600)+"px; left: 0px;");
            //动态加载图片
            for(var i=0;i<imglist.length;i++){
                var img = document.createElement("img");
                list.appendChild(img);
                (list.children)[i].setAttribute("src",imglist[i]);
            }
            //动态生成轮播图小圆点
            var cicle = document.createElement("div");
            cicle.setAttribute("id", "buttons");
            
            for (var i = 0; i < imglist.length; i++) {
                var span = document.createElement("span");
                // span.innerHTML = i + 1;
                cicle.appendChild(span);
            }
            $("container").appendChild(cicle);

            var spanChildren = cicle.children;
            spanChildren[0].setAttribute("class", "on");
            for (var i = 0; i < spanChildren.length; i++) {
                spanChildren[i].setAttribute("onclick", "spanClick(" + i + ")");
            }
            //小圆点已经添加完成了，可以进行赋值
            var buttons = document.getElementById("buttons").getElementsByTagName('span');
            bts = buttons;
            
            prev.onclick = function () {
                index -= 1;
                if (index == -1) {
                    index = 4;
                }
                buttonShow();
                animate(600, "prev");
            }

            next.onclick = function () {
                //由于上边定时器的作用，index会一直递增下去，我们只有5个小圆点，所以需要做出判断
                index += 1;
                if (index == 5) {
                    index = 0;
                }
                buttonShow();
                animate(600, "next");
            }

            //圆点点击切换图片
            // for (var i = 0; i < buttons.length; i++) {
            //     buttons[i].onclick = function () {
            //         //偏移量获取：这里获取鼠标移动到小圆点的位置，用this把index绑定到对象buttons[i]上
            //         //由于这里的index是自定义的属性，需要用到getAttribute()这个DOM2级方法，去获取自定义indexde的属性
            //         var clickIndex = parseInt(this.getAttribute('index'));
            //         var offset = 600 * (index - clickIndex);
            //         animate(offset);
            //         index = clickIndex;
            //         buttonShow(buttons);
            //     }
            // }
        }
        /*
        offset:移动的距离
        operating:操作的按钮
        */
        function animate(offset, operating) {
            //获取的是style.left，是相对左边获取距离，所以第一张图后style.left都为负值，
            //且style.left获取的是字符串，需要用parseInt()取整转化为数字。
            if (operating == "next") {
                console.log("进入了next");
                var newLeft = parseInt(list.style.left) - offset;
                if (newLeft < -((imglist.length-1) * offset)) {
                    list.style.left = 0 + 'px';
                } else {
                    list.style.left = newLeft + 'px';
                }
            } else if (operating == "prev") {
                console.log("进入了prev");
                var newLeft = parseInt(list.style.left) + offset;
                if (newLeft > 0) {
                    list.style.left = -((imglist.length-1) * offset) + 'px';
                } else {
                    list.style.left = newLeft + 'px';
                }
            } else {
                console.log("圆点点击");
                var newLeft = offset;
                list.style.left = newLeft + 'px';
            }

        }

        function spanClick(i) {
            console.log("圆点点击:" + i);
            if (i == index) {
                return
            }
            var clickIndex = i;
            var offset = -(600 * clickIndex);
            console.log("offset:" + offset);
            animate(offset, "spanclick");
            index = clickIndex;
            buttonShow();
        }

        function play() {
            timer = setInterval(function () {
                next.onclick()
            }, 1500)
        }
        play();

        function stop() {
            clearInterval(timer);
        }

        container.onmouseover = stop;
        container.onmouseout = play;

        function buttonShow() {
            //这里需要清除之前的样式
            for (var i = 0; i < bts.length; i++) {
                if (bts[i].className == "on") {
                    bts[i].className = "";
                }
            }
            //数组从0开始，index也从0开始
            bts[index].className = "on";
        }
    </script>
</body>

</html>