原生DOM方法实现，多个图片的横向左右轮播
Posted 可樂_Thompson
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生DOM方法实现，多个图片的横向左右轮播相关的知识，希望对你有一定的参考价值。
轮播页面的构成：
页面中间有多个同样大小的图片，在图片群的左右两侧有左右方向播动的可点击钮，图片群就会往左侧翻转，并且在最后一张图片的时候，第一张图片就会继续出现在最后一张图片，属于无裂痕翻转。
右侧按钮也是同样。
实现逻辑：
左侧按钮，通过获取图片所在上一级（父级）目录，对出现在最左侧的第一个child用removeChild()方法删除第一个，然后将删除的该子元素添加到父级元素的最后，每次点击事件就会重复前面操作。
实现效果:
（初始化图）：
（点击左侧按钮）：
为了使一个界面只出现所需要的某几张图片，可以对父容器使用overflow：hidden
如图：
（向右点击一次）：
代码如下：
<style>
* {
padding: 0;
margin: 0;
}
ul {
/*position: absolute;*/
/*left: -20px;*/
list-style: none;
margin: 50px auto;
display: inline-block;
margin-left: -400px;
width: 1800px;
}
ul li {
display: inline-block;
float: left;
width: 200px;
/*height: 200px;*/
margin-right: 20px;
}
ul li img{
width: 100%;
}
.wrapper {
width: 880px;
height: 880px;
margin: 50px auto;
background-color: azure;
border: 1px gainsboro dotted;
overflow: hidden;
}
.btn01 {
float: left;
margin-left: 30px;
margin-top: 70px;
}
.btn02 {
float: right;
margin-right: 30px;
margin-top: 70px;
}
</style>
</head>
<body>
<div class="wrapper">
<ul id="sliderBox">
<li><a href="#"><img src="images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/4.jpg" alt=""></a></li>
<li><a href="#"><img src="images/5.jpg" alt=""></a></li>
<li><a href="#"><img src="images/6.jpg" alt=""></a></li>
<li><a href="#"><img src="images/7.jpg" alt=""></a></li>
<li><a href="#"><img src="images/8.jpg" alt=""></a></li>
</ul>
<div class="btn01" onclick="leftArrow()"><img src="images/左箭头.png"/></div>
<div class="btn02" onclick="rightArrow()"><img src="images/右箭头.png"></div>
</div>
</body>
<script>
function leftArrow() {
var parent = document.getElementById("sliderBox");
var children = parent.getElementsByTagName("li");
var firstChild = children[0];
var tmp = firstChild;
parent.removeChild(firstChild);
parent.appendChild(tmp);
}
function rightArrow() {
var parent = document.getElementById("sliderBox");
var children = parent.getElementsByTagName("li");
var lastChild = children[children.length-1];
var tmp = lastChild;
parent.removeChild(lastChild);
parent.insertBefore(tmp,children[0]);
}
</script>
以上是关于原生DOM方法实现，多个图片的横向左右轮播的主要内容，如果未能解决你的问题，请参考以下文章