web前端学习之轮播图实现（原生js）
Posted 风中的沙~~
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web前端学习之轮播图实现（原生js）相关的知识，希望对你有一定的参考价值。
很久前接触过html css js 但自己在工作中用的少，简单的需求直接vue 走起，没有静下心好好写点js css 什么的，现在想要好好学习下 大前端的知识了，第一个小练习，做了个轮播图
网上有很多轮播图的实现过程,每个人都有自己不一样的思路，自己只要实现了就行。当然有些思路确实比我的要好，后续借鉴学习。
逻辑：将要展示的图片全部放在盒子里，超出部分隐藏，然后设置定时器，没两秒循环一次 img 标签，如果display 为block 就将 display 设置为none 那么后面的图片就到当前的div 区域内了，大体思路是这样 ，当然后面加入了js 时间 支持前后翻页，和提示功能
上代码如下：
<!DOCTYPE html>
<html>
<head>
<title>caroucel</title>
</head>
<style>
*{
margin:0;
padding:0
}
.box {
width: 300px;
height: 250px;
border: 1px solid red;
position: relative
}
img {
width: 300px;
height: 250px;
}
#prev {
position: absolute;
top: 50%;
margin-top: -12px;
height: 35px;
width: 15px;
background-color: rgba(255, 0, 0, .6);
vertical-align: center;
line-height: 35px;
cursor:pointer;
}
#next {
position: absolute;
top: 50%;
right: 0;
margin-top: -12px;
height: 35px;
width: 15px;
background-color: rgba(255, 0, 0, .6);
vertical-align: center;
line-height: 35px;
cursor:pointer;
}
</style>
<body>
<div class=\'box\' style=\'overflow: hidden\'>
<img src="./1" alt="">
<img src="./2" alt="">
<img src="./3" alt="">
<img src="./4" alt="">
<img src="./5" alt="">
<span id=\'prev\'>
< </span> <span id=\'next\'> >
</span>
</div><div id=\'dd\'></div>
<script>
// 修改样式为块
function inintBlock() {
const imgObjs = document.getElementsByTagName("img")
for (let i = 0; i < imgObjs.length; i++) {
imgObjs[i].style.display = \'block\'
}
}
inintBlock()
function operate() {
const imgObjs = document.getElementsByTagName("img")
for (let i = 0; i < imgObjs.length; i++) {
if (imgObjs[i].style.display === \'block\') {
imgObjs[i].style.display = \'none\'
break;
}
}
const state = Array.prototype.slice.call(imgObjs).map(function (item) { return item.style.display })
const res = state.filter(function (i) { return i === \'none\' })
if (res.length === 5) {
inintBlock()
}
}
let interval = window.setInterval(
function () {
operate()
}, 2000
)
const el = document.getElementsByClassName(\'box\')[0]
el.addEventListener(\'mouseenter\', function (event) {
window.clearInterval(interval)
})
el.addEventListener(\'mouseleave\', function (event) {
interval = window.setInterval(function () { operate() }, 2000)
})
document.getElementById(\'prev\').addEventListener(\'click\',
//获取当前images 的属性进行遍历，找block属性，修改前一个节点样式
function () {
const imgObjs = document.getElementsByTagName("img")
for (let i = 0; i <imgObjs.length;i++){
if(imgObjs[i].style.display === \'block\'){
if(i-1<0){
document.getElementsByClassName(\'box\')[0].nextSibling.innerText = \'已经是首页了\'
break;
}
imgObjs[i-1].style.display = \'block\'
break;
}
}
})
document.getElementById(\'next\').addEventListener(\'click\',function(){
const imgObjs = document.getElementsByTagName("img")
for (let i = 0; i <imgObjs.length;i++){
if(imgObjs[i].style.display === \'block\'){
if(i+1>4){
document.getElementsByClassName(\'box\')[0].nextSibling.innerText = \'已经是最后一页了\'
break;
}
imgObjs[i].style.display = \'none\'
break;
}
}
})
</script>
</body>
</html>
代码也是很简单的，主要联系下，js 遍历 dom 的操作，孰能生巧，多多练习
做的过程中有发现个方法，通过定位把几张图片从左往右一次拼接起来，点击的时候向左或者向右触发事件，事件内容是修改各个图片的定位 left right 值 从而产生左右翻滚的效果。（z-index 也是个实现的方法）
刚开始感觉下手很难，但做着做着方法也就越来越多，根据需求选择最合适的最适合自己的就好。
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
下面是一个轮播图左右滑动的实现
html部分：
<!DOCTYPE html>
<html lang="en"><head> <meta charset="UTF-8"> <title>Carousel Figure</title> <link rel="stylesheet" href="style.css" rel="external nofollow" ></head><body><!--从左向右滑动--> <nav> <ul id="index"> <li class="on"></li> <li></li> <li></li> <li></li> <li></li> </ul> <ul id="img"> <li><img src="../images/img1.jpg" alt="img1"></li> <li><img src="../images/img2.jpg" alt="img2"></li> <li><img src="../images/img3.jpg" alt="img3"></li> <li><img src="../images/img4.jpg" alt="img4"></li> <li><img src="../images/img5.jpg" alt="img5"></li> </ul> </nav><script src="script.js"></script></body></html>*{
margin:0; padding:0;}nav{ width: 720px; height: 405px; margin:20px auto; overflow: hidden; position: relative;}#index{ position: absolute; left:320px; bottom: 20px;}#index li{ width:8px; height: 8px; border: solid 1px gray; border-radius: 100%; background-color: #eee; display: inline-block;}#img{ width: 3600px;/*不给宽高无法移动*/ height: 405px; position: absolute;/*不定义absolute，js无法设置left和top*/ z-index: -1;}#img li{ width: 720px; height: 405px; float: left;}#index .on{ background-color: black;}function moveElement(ele,x_final,y_final,interval){//ele为元素对象
var x_pos=ele.offsetLeft;
var y_pos=ele.offsetTop;
var dist=0;
if(ele.movement){//防止悬停
clearTimeout(ele.movement);
}
if(x_pos==x_final&&y_pos==y_final){//先判断是否需要移动
return;
}
dist=Math.ceil(Math.abs(x_final-x_pos)/10);//分10次移动完成
x_pos = x_pos<x_final ? x_pos+dist : x_pos-dist;
dist=Math.ceil(Math.abs(y_final-y_pos)/10);//分10次移动完成
y_pos = y_pos<y_final ? y_pos+dist : y_pos-dist;
ele.style.left=x_pos+\'px\';
ele.style.top=y_pos+\'px\';
ele.movement=setTimeout(function(){//分10次移动，自调用10次
moveElement(ele,x_final,y_final,interval);
},interval)
}
图片自动轮播：
var img=document.getElementById(\'img\');
var list=document.getElementById(\'index\').getElementsByTagName(\'li\');var index=0;//这里定义index是变量，不是属性var nextMove=function(){//一直向右移动，最后一个之后返回 index+=1; if(index>=list.length){ index=0; } moveIndex(list,index); moveElement(img,-720*index,0,20);};var play=function(){
timer=setInterval(function(){ nextMove(); },2500);};for(var i=0;i<list.length;i++){//鼠标覆盖上哪个小圆圈，图片就移动到哪个小圆圈，并停止
list[i].index=i;//这里是设置index属性，和index变量没有任何联系 list[i].onmouseover= function () { var clickIndex=parseInt(this.index); moveElement(img,-720*clickIndex,0,20); index=clickIndex; moveIndex(list,index); clearInterval(timer); }; list[i].onmouseout= function () {//移开后继续轮播 play(); };}
以上是关于web前端学习之轮播图实现（原生js）的主要内容，如果未能解决你的问题，请参考以下文章