本文实例为大家分享了js实现轮播图效果的具体代码,供大家参考,具体内容如下
实现轮播图
学习前端差不多两三个月,在这里记录分享一下。因本人菜鸟一枚,希望大佬们多多指点,勿喷。
通过计算每一张图片高度实现滑动轮播图
- <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来实现轮播,但是生硬。
结语