前端程序援小知识《简单上手教你如何用原生JS+CSS写轮播图》

如何用原生JS写轮播图，可能很多人在写轮播图喜欢用插件，因为简单嘛也能省下很多的代码量
这里呢给大家分享一下如何在不用插件使用·原生JS去写轮播图，不喜勿喷，可以学习交流

<div><ul id=\"one\"><li class=\"show\"><img src=\"./img/tg.jpg\" alt=\"\"></li><li><img src=\"./img/tg2.jpg\" alt=\"\"></li><li><img src=\"./img/tg3.jpg\" alt=\"\"></li><li><img src=\"./img/tg4.jpg\" alt=\"\"></li></ul><ul id=\"two\"><li class=\"on\">1</li><li>2</li><li>3</li><li>4</li></ul></div>

我们先生成一个DIV盒子作为我们的展示区，上面的ul li标签则是我们需要轮播的图片，下面的第二组
ul li标签则是我们提前预留出来的小标，用来点击切换到我们想要切换的位置，以及现在轮播到哪一张了。

*{margin: 0PX;padding: 0px;}/* 干掉所有的margin和padding */div{width: 780px;height: 360px;overflow: hidden;}  /*给盒子宽高让超出的部分隐藏 */img{width: 780px;height: 300px;}/*给上图片宽高*/#one li{width: 780px;height: 300px;position: absolute;z-index: -1;opacity: 0;transition: 1s ease-in;}/* 这里的每个li标签就是我们所要轮播的图片框 ，opacity让图片暂时隐藏*//* 然后定位到下面动起来。这样上面就能展示出我们需要看到的样子*/#two{position: absolute;left: 15%;top: 33%;}/* 这里我们将小标进行定位到图片的下方 */#two li{display: inline-block;width: 20px;height: 20px;border: 1px solid black;text-align: center;margin: 0px 5px;cursor: pointer;}/* 给小标加上样式 */#one .show{opacity: 1;}/* 让框内的一张图片显示下面通过JS更改CLASS名进行轮播 */#two .on{border: 1px solid orange;}/* 小标也要跟着动这样也要给小标一个显眼的颜色 */

接下来我们给上样式，上面都标明了注释，需要注意的是
先opacity将图片设成透明，然后置于下层
然后给第一个li一个class设为不透明。

接下来就是JS部分了，内容也比较少

<script>var imgList = document.getElementById(\'one\').getElementsByTagName(\'li\')//这里获取one和下面的所有livar list = document.getElementById(\'two\').getElementsByTagName(\'li\')// 获取小标two的所有livar index = 0var timer// 设置定时器for (var i = 0 ; i < list.length; i++){// 这里用一个FOR循环list[i].index = ilist[i].onmouseover = function(){var clickIndex = parseInt(this.index)index = clickIndexmoveImg(imgList,index)moveIndex(list,index)clearInterval(timer)};list[i].onmouseout = function(){play()}}var nextmove = function(){index += 1if(index >= 4){index = 0// 这里要分析当到第四的时候我们要重置回到原来的起点}moveImg(imgList,index)moveIndex(list,index)// 图片和小标要同时移动}var play = function(){timer = setInterval(function(){nextmove()},2000)}play()function moveImg(list,index){for (var i = 0;i < list.length;i++){if(list[i].className == \'show\'){list[i].className = \'\'}//这里需要注意的是当我们这张图片显示后我们要//隐藏这张，然后去显示下一张，传递}list[index].className = \'show\'//将下一个LI的classname变为show}function moveIndex(list,num){for(var i = 0;i<list.length;i++){if(list[i].className ==\'on\'){list[i].className = \'\'}}list[num].className = \'on\'}// 小标也是同理进行显示</script>其实代码量也不是很多，比较简单下面是效果图```javascript在这里插入代码片

下面是效果图·