两种方法实现轮播图效果

实现轮播图

学习前端差不多两三个月，在这里记录分享一下。因本人菜鸟一枚，希望大佬们多多指点，勿喷。

通过计算每一张图片高度实现滑动轮播图

HTML代码：

		<div class="fate">
			<div class="lancer">
				<ul class="saber">
					<li><img src="img/illust_13010631_20191118_150928.jpg"></li>
					<li><img src="img/illust_13010631_20191118_150928.jpg"></li>
					<li><img src="img/illust_13010631_20191118_150928.jpg"></li>
					<li><img src="img/illust_13010631_20191118_150928.jpg"></li>
					<li><img src="img/illust_13010631_20191118_150928.jpg"></li>
				</ul>
			</div>
		</div>
		<div class="archer">
			<button class="goup" onclick="goup()"><</button> 
			<button class="godown" onclick="godown()">></button>
		</div>

CSS代码：

* {
	transition: all 1s;
	margin: 0px;
	padding: 0px;
}

.fate {
	position: absolute;
	top: 0%;
	width: 512px;
	height: 512px;
	overflow: hidden;
}

ul li {
	list-style: none;
}
.lancer{
	position: absolute;
	top: 0%;
	width: 100%;
	height: 100%;
}
.saber {
	top: 0px;
	position: absolute;
}
.archer{
	position: absolute;
}
button {
	z-index: 99;
}

JS代码：

var index=0;
function godown(){
				var li = document.getElementsByTagName("li");
				//获取单个li宽度（单张图片高度）
				var liHeight = li[0].scrollHeight;
				
				var goup=document.getElementsByClassName("goup");
				var lancer=document.getElementsByClassName("lancer")[0];
				if(index<4){
					index++;
				}else{
					index=0;
				}
				lancer.style.top = -index*liHeight+"px";
			}
function goup(){
				var li = document.getElementsByTagName("li");
				//获取单个li宽度（单张图片高度）
				var liHeight = li[0].scrollHeight;
				
				var goup=document.getElementsByClassName("goup");
				var lancer=document.getElementsByClassName("lancer")[0];
				if(index>0){
					index--;
				}else{
					index=4;
				}
				lancer.style.top = -index*liHeight+"px";
			}

如有错误望指出。

利用z-index实现轮播图

HTML代码

<div class="fate">
        <div class="saber">
            <ul>
                <li class="archer active"><img src="img/illust_13010631_20191118_150928.jpg"></li>
                <li class="archer"><img src="img/illust_13010631_20191118_150928.jpg"></li>
                <li class="archer"><img src="img/illust_13010631_20191118_150928.jpg"></li>
                <li class="archer"><img src="img/illust_13010631_20191118_150928.jpg"></li>
                <li class="archer"><img src="img/illust_13010631_20191118_150928.jpg"></li>
            </ul>
        </div>
    </div>
    <div class="lancer">
        <button id="goup">></button>
        <button id="godown"><</button>
    </div>

CSS代码

li {
            list-style: none;
        }
        
        .archer {
            position: absolute;
            top: 0%;
            display: none;
        }
        
        .active {
            display: block;
        }
        
        button {
            position: absolute;
            top: 70%;
            width: 50px;
        }
        
        #goup {
            left: 400px;
        }
        
        #godown {
            left: 0px;
        }

JS代码

var pic = document.getElementsByTagName("li");
        var archer = document.getElementsByClassName("archer");
        var goup = document.getElementById("goup");
        var godown = document.getElementById("godown");
        var index = 0;
        goup.onclick = function() {
            for (var i = 0; i < pic.length; i++) {
                pic[i].className = "archer";
            }
            if (index < 4) {
                index++;
            } else {
                index = 0;
            }
            pic[index].className = "active";

        }
        godown.onclick = function() {
            for (var i = 0; i < pic.length; i++) {
                pic[i].className = "archer";
            }
            if (index > 0) {
                index--;
            } else {
                index = 4;
            }
            pic[index].className = "active";

        }

利用index来实现轮播，但是生硬。

结语

以上就是两种方法实现轮播图效果，望指正，谢谢。

来源：CSDN

作者：HAG HUG

链接：https://blog.csdn.net/QuiltKing/article/details/103977782