原生js简单轮播图
实现原理:
一系列大小相等的图片平铺,利用css布局,只显示其中一张图片,其它图片隐藏。通过偏移量来实现滑动,或者手动点击来实现滑动。
Html布局
<body> <div id="container"> <div id="list" style="left: 0px"> <!-- <img src="./img/pic_05.png" alt="1" />--> <img src="./img/pic_01.png" alt="1" /> <img src="./img/pic_02.png" alt="2" /> <img src="./img/pic_03.png" alt="3" /> <img src="./img/pic_04.png" alt="4" /> <img src="./img/pic_05.png" alt="5" /> <!--<img src="./img/pic_01.png" alt="5" />--> </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"><</a> <a href="javascript:;" id="next" class="arrow">></a>
父容器container存放所有内容,list子容器存放图片,buttons子容器存放按钮小圆点。下面的表示轮播的两个箭头。
进行优化,实现无缝轮播
当从最后一张图滚动到第一张图时,中间有很大的空白。
CSS部分
注意list部分,overfloat : hidden ; 显示一张图片,其它图片隐藏。
<style> * { margin: 0; padding: 0; text-decoration: none; } body { padding: 20px; } #container { position: relative; width: 600px; height: 400px; border: 3px solid #333; margin: 50px auto; overflow: hidden; } #list { position: absolute; z-index: 1; width: 4200px; height: 400px; } #list img { float: left; width: 600px; height: 400px; } #buttons { position: absolute; left: 250px; bottom: 20px; z-index: 2; height: 10px; width: 100px; } #buttons span { float: left; margin-right: 5px; width: 10px; height: 10px; border: 1px solid #fff; border-radius: 50%; background: #333; cursor: pointer; } #buttons .on { background: orangered; } .arrow { position: absolute; top: 180px; z-index: 2; display: none; width: 40px; height: 40px; font-size: 36px; font-weight: bold; line-height: 39px; text-align: center; color: #fff; background-color: RGBA(0, 0, 0, .3); cursor: pointer; } .arrow:hover { background-color: RGBA(0, 0, 0, .7); } #container:hover .arrow { display: block; } #prev { left: 20px; } #next { right: 20px; } </style>
如下图所示:
JS部分
首先实现手动点击左右箭头,实现图片的偏移;
function animate(offset) { console.log(list.style.left); //获取的是style.left,是相对左边获取距离,所以第一张图后style.left都为负值, //且style.left获取的是字符串,需要用parseInt()取整转化为数字。 var newLeft = parseInt(list.style.left) + offset; list.style.left = newLeft + 'px'; if(newLeft<-2400){ list.style.left = 0 + 'px'; } if(newLeft>0){ list.style.left = -2400 + 'px'; } }
但是现在问题来了,当点击图片到最后一张时候,无法跳到第一张。原因是我们用left偏移量来控制图片,在点击箭头时偏移量在发生变化,为了在最后一张图片点击时能跳到第一张图片,我们需要对偏移量做一个判断;
在animate函数里加上一个关于偏移量的判断;
prev.onclick = function() { animate(600); } next.onclick = function() { animate(-600); }
加上该判断后运行下,能跳转到第一页,没问题。
自动轮播,顾名思义就是自己能切换图片,则此时需要给他添加一个定时器
这里我们是用setInterval(),因为我们的图片需要循环滚动
var timer; function play(){ timer = setInterval(function () { prev.onclick() }, 1500) } play();
当把鼠标移到图片上面时,停止自动切换,鼠标移开时继续自动切换
function stop(){ clearInterval(timer); } //为什么不用stop(); container.onmouseover = stop; container.onmouseout = play;
(有必要强调一下对于定时器,有必要说明一下setInterval()跟setTimeout的区别了。简单来说,setInterval()执行多次,setTimeout()只执行一次。)
小圆点部分
var buttons = document.getElementById('buttons').getElementsByTagName('span'); var index = 1; function buttonsShow() { //这里需要清除之前的样式 for (var i = 0; i < buttons.length; i++) { if (buttons[i].className == 'on') { buttons[i].className = ''; } } //数组从0开始,故index需要-1 buttons[index - 1].className = 'on'; } prev.onclick = function() { index -= 1; if (index < 1) { index = 5; } buttonsShow(); animate(600); } next.onclick = function() { //由于上边定时器的作用,index会一直递增下去,我们只有5个小圆点,所以需要做出判断 index += 1; if (index > 5) { index = 1; } buttonsShow(); animate(-600); } }
好了~把上述代码拼在一起,就能组成一个简单的轮播咯。