原生JS实现轮播图

发布日期：2021-05-14 16:28:50 浏览次数：18 分类：原创文章

本文共 4625 字，大约阅读时间需要 15 分钟。

记得上一次写博客还是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)            }        };

制作轮播图还有很多种方法，大家可以都尝试一下，一定会很好玩的！！！

上一篇：HDOJ 2049不容易系列之——考新郎

下一篇：回望过去，展望未来

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

原生JS实现轮播图

发表评论

最新留言

关于作者

推荐文章