【网页前端实现多张图片轮播或者切换】三种方法实现

多张图片轮播

今天我们主要用三种方式实现多张图片轮播，运用的语言是web中的html，使用软件是HBuilder。
达到以下这种效果：![可以通过下方原点点击或者左右两侧点击进行图片的切换](https://img-blog.csdnimg.cn/59365cb3e7454d0eadc15f9eb57d3d51.png#pic_center)首先我们看html文件中先建立一个盒子，里面装载所有的图片，叠放在一堆。

<div id="wrap"><ul class="imgs"><li class="active"><a href="#"><img src="img/1.jpg"/></a></li><li><a href="#"><img src="img/2.jpg"/></a></li><li><a href="#"><img src="img/3.jpg"/></a></li><li><a href="#"><img src="img/4.jpg"/></a></li><li><a href="#"><img src="img/5.jpg"/></a></li><li><a href="#"><img src="img/6.jpg"/></a></li><li><a href="#"><img src="img/7.jpg"/></a></li></ul><ul class="lrbtn"><li>&lt;</li><li>&gt;</li></ul><ul class="btn"><li class="on"></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div>

然后我们通过css里面的一些设置将图片样式大小进行修饰。

*{margin: 0;padding: 0;}
#wrap{position: relative;/*容器盒子都是设为相对定位*/width: 590px;height: 470px;margin: 50px auto;/*左右居中*/}/*图前面的小点和箭头去掉*/
#wrap ul{list-style: none;
}/*将图片都叠加到一块(布局)*/
#wrap .imgs li{position: absolute;/*所有图片居中集合*/display: none;
}
/*当前活动图的展示*/
#wrap .imgs li.active{display: block;
}/*左右按钮的布局*/
#wrap .lrbtn li{position: absolute;top: 50%;/*垂直布局*/margin-top: -40px;/*相对居中*/width:40px ;height: 80px;background-color: white;/*背景色*/opacity: 0.5;/*透明度*/line-height: 80px;/*小箭头垂直居中，行高设置与按钮同高就可以*/}
#wrap .lrbtn li:last-child{right: 0;
}/*轮播按钮的布局设计*/
#wrap .btn{position: absolute;bottom: 10px;left: 0;right: 0;margin: auto;background-color: pink;display: flex;width: 210px;height: 30px;border-radius: 20px;}
#wrap .btn li{width: 20px;height: 20px;flex:1;border-radius: 10px;background-color: white;margin: 5px;
}
#wrap .btn li.on{background-color: red;
}

最后用js动画实现三种方式的图片轮播效果：自动播放，下方按钮点击切换图片以及左右两侧的点击切换上下两张图片。

<script >//图片自动轮播方法//下方焦点切换方法var curIndex =0;var imgs=document.querySelectorAll("#wrap .imgs li")var btns=document.querySelectorAll("#wrap .btn li")/*测试输出*/// console.log(btns,imgs)for(let i=0;i<btns.length;i++){btns[i].index=ibtns[i].onclick=start}function start(){curIndex=this.index;// console.log(curIndex);for(let i=0;i<btns.length;i++){btns[i].classList.remove("on")imgs[i].classList.remove("active")}btns[curIndex].classList.add("on")imgs[curIndex].classList.add("active")}//左右按钮的图片切换方法//获取左右按钮let left = document.querySelector('#wrap .lrbtn').firstElementChildlet right = document.querySelector('#wrap .lrbtn').lastElementChild//点击左按钮，索引减少，图片切到上一张left.onclick = function() {if(curIndex===0){curIndex=6}else{curIndex--}for(let i=0;i<btns.length;i++){btns[i].classList.remove("on")imgs[i].classList.remove("active")}btns[curIndex].classList.add("on")imgs[curIndex].classList.add("active")}//点击右按钮，索引增加，图片切到下一张right.onclick = function() {curIndex=(++curIndex)%7for(let i=0;i<btns.length;i++){btns[i].classList.remove("on")imgs[i].classList.remove("active")}btns[curIndex].classList.add("on")imgs[curIndex].classList.add("active")}</script>

最后希望能帮到大家，这是一个网页中小小的一个功能啊，不理解的朋友可以留言或者私信，有空看到我会一一解答的哦！

【网页前端实现多张图片轮播或者切换】三种方法实现相关推荐

前端实现轮播图的三种方法。
轮播图,作为前端学习的经典案例,涉及了各种知识点,包括动画函数,js基础知识以及逻辑思路等,一辈子只做一次. 下面总结实现轮播图的三种方法,从易到难,大家选择性学习. 轮播图一. Vue.js实现轮 ...
轮播图的两种方法及自动轮播
轮播图共计四种方法,本期先向大家分享两种,下期会补充剩余二个方法公共部分: * {padding: 0px;margin: 0px;}.banner {width: 600px;margin: au ...
前端js调用后端API获取数据的三种方法（2022.7.25）
前端js调用后台API获取数据的三种方法(2022.7.25) 前言需求分析一个Get实例浏览器请求 SoapUI软件请求一个Post实例浏览器请求 SoapUI软件请求 1.Http简介( ...
html图片轮播怎么做的,CSS3制作轮播图的一种方法
轮播图,网页上经常能看得见,画面比较精美,下面是纯CSS3的轮播图的一种下面是style部分: 这几行都能明白吧 *{margin:0;padding:0;} a{text-decoration:n ...
超详细轮播图的三种实现方法html+css+javascript
对代码不理解的可以参考我的个人视频 https://www.bilibili.com/video/BV1jA411Y7Ek/ 1.带箭头焦点轮播图js完成版 1.1 html部分 <!DOCTY ...
JS实现轮播图的三种简单方法。
Js实现轮播图01 实现思路这可能是轮播图最简单点的实现之一,通过更改图片的src来实现该效果,首先需要将图片命名格式统一比如pic01.jpg,pic02.jpg-,再通过js使用定时器去改变im ...
JS轮播图的n种方法
第一种轮播图, 没有耳朵, 自动轮播, 鼠标放上去会停止, 只需在body里面更改图片宽高和图片路径 <!doctype html> <html lang="en&quo ...
JS原生轮播图（三种不同样式）
文章目录前言轮播图展示源码(可直接使用) 轮播图01 轮播图02,03 前言原生js制作的轮播图,不需要引入插件. 实现功能: 1)定时器效果,隔一秒转下一张图 2)鼠标移上去停止轮播,离开则 ...
HTML5如何制作轮播透明效果,js前端开发实现banner轮播透明切换
/p> 前端开发 body, p, ul, li, ol, dl, dd, button, input, h1, h2, h3, h4, h5, h6{ margin:0; padding:0; ...

【网页前端实现多张图片轮播或者切换】三种方法实现

多张图片轮播

【网页前端实现多张图片轮播或者切换】三种方法实现相关推荐

最新文章

热门文章