零基础让你迅速学会JS轮播图_怎么快速学会js轮播并理解-CSDN博客

本文链接：https://blog.csdn.net/qq_45731083/article/details/104054295

记得上一次写博客还是2019年，而现在已经是2020年了。期末考试终于结束了，看到成绩后，有人欢喜有人忧，这应该是正常不过的事了。这段时间过得很充实，但是如果真的问我这段时间学到了什么，收获了多少，我可能回答不上来。不管收获怎样，至少是有一点的，这段时间学习计划是JS，也让我把上次考核中不会的轮播图也学会了，还是蛮开心的! ! !
这次也就分享一下制作轮播图的方法，如果有写的不好的地方，望大家指出，谢谢！

原生JS实现轮播图

首先看一下效果吧！

在这里插入图片描述
代码如下：
HTML部分如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<body>
    <div id="img">
        <ul id="imgList">
            <li><img src="../img/g6.jpg"></li>
            <li><img src="../img/g2.jpg"></li>
            <li><img src="../img/g3.jpg"></li>
            <li><img src="../img/g4.jpg"></li>
            <li><img src="../img/g5.jpg"></li>
            <li><img src="../img/g7.jpg"></li>
            <li><img src="../img/g6.jpg"></li>
        </ul>
        <div id="nav">
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </div>

</body>
</html>

CSS部分如下：

        *{
            margin: 0;
            padding: 0;
        }
        /*设置div样式*/
        #img{
            width: 660px;
            height: 426px;
            margin: 50px auto;
            padding: 10px 0;
            background-color: #7ABA19;
            overflow: hidden;
            position: relative;
        }
        #imgList{
            list-style: none;
            position: absolute;
            left:0;
        }
        #imgList li{
            margin: 0 10px;
            float: left;
        }
        #nav{
            position:absolute;
            bottom:15px;
        }
        #nav a{
            float: left;
            background-color: red;
            opacity: 0.5;
            width: 15px;
            height: 15px;
            /*解决IE8的兼容性问题*/
            filter: alpha(opacity=50);
            margin: 0 5px;
        }
        #nav a:hover{
            background-color:black;
        }

JS部分如下：

        window.onload=function () {
            var imgList = getid("imgList");
            var img = getid("img");
            var nav = getid("nav");
            var imgs = document.getElementsByTagName("img");
            var aset = document.getElementsByTagName("a");
            var index = 0;
            var time;
            //设置ul的宽度以便可以容下所有图片
            imgList.style.width = 660 * imgs.length + "px";
            aset[index].style.backgroundColor = "black";
            //定位导航点  offsetWidth所有宽度，包括内边框 内边距 内容
            nav.style.left = (img.offsetWidth - nav.offsetWidth) / 2 + "px";
            function getstyle(obj,name) {
        		return getComputedStyle(obj, null)[name];
    		}
          	function move(obj,attr,target,value,callback) {
		        clearInterval(obj.timer);
		        var current= parseInt(getstyle(obj, attr));
		        if(current>target){
		            value=-value;
		        };
		        //parseInt()将一个带单位的值变成不带单位的
		        obj.timer = setInterval(function () {
		        //获取元素的当前位置		  
		        //获取原来值
		        var oldvalue=parseInt(getstyle(obj, attr));
		        var newvalue = oldvalue + value;
		        if((value<0 && newvalue<target)||(value>0 && newvalue>target)){
		                newvalue=target;
		        }
		        //若想要获取的元素属性为变量则应该通过style[变量]来获取
		        obj.style[attr] = newvalue + "px";
		        if (newvalue == target) {
		                clearInterval(obj.timer);
		                callback && callback();
		        }
		      }, 30);
		    }
            autoChange();
            for (var i = 0; i < aset.length; i++) {
                //为每个a标签做一个标记
                aset[i].num = i;
                aset[i].onclick = function () {
                    clearInterval(time);
                    index = this.num;
                    set();
                    move(imgList, "left", -660 * index, 30, function () {
                        autoChange();
                    });
                }
            }
            //设置导航点和图片同步
            function set() {
                if (index >= imgs.length - 1) {
                    index = 0;
                    imgList.style.left = 0;
                }
                for (var i = 0; i < aset.length; i++) {
                    aset[i].style.backgroundColor = "";
                }
                aset[index].style.backgroundColor = "black";
            }
            function autoChange(){
               time=setInterval(function () {
                    index++;
                    move(imgList, "left", -660 * index, 30, function () {
                        set();
                    });
                }, 2000)
            }
        };