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

这篇具有很好参考价值的文章主要介绍了【网页前端实现多张图片轮播或者切换】三种方法实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

多张图片轮播

今天我们主要用三种方式实现多张图片轮播,运用的语言是web中的html,使用软件是HBuilder。
达到以下这种效果:【网页前端实现多张图片轮播或者切换】三种方法实现

首先我们看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=i
				btns[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').firstElementChild
			let 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)%7
			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")
			}
			
		</script>

最后希望能帮到大家,这是一个网页中小小的一个功能啊,不理解的朋友可以留言或者私信,有空看到我会一一解答的哦!文章来源地址https://www.toymoban.com/news/detail-504170.html

到了这里,关于【网页前端实现多张图片轮播或者切换】三种方法实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • opencv多张图片实现全景拼接

       最近camera项目需要用到全景拼接,故此查阅大量资料,终于将此功能应用在实际项目上,下面总结一下此过程中遇到的一些问题及解决方式,同时也会将源码附在结尾处,供大家参考,本文采用的opencv版本为3.4.12。   首先说一下此源码的大概执行流程,此项目进行全

    2024年01月17日
    浏览(45)
  • 前端,CSS,背景颜色跟随轮播图片改变而改变(附源码)

    首先看效果! 比如轮播图时红色,那么背景的底色也是红色,轮播图时黄色,背景的底色也是黄色,这就是根据轮播图的图片切换,而改变背景颜色随轮播图颜色一致 话不多说,直接上代码!非常简单 轮播图代码就不放上去了,直接使用插件 swiper ,选择你喜欢的版本 就可

    2024年02月22日
    浏览(49)
  • 微信小程序实现一键保存多张图片

    实现功能:点击‘保存图片’可以将商品的所有图片以及商品的海报图片保存到相册中 由于downloadFile一次只能下载一张图片,因此需要依次遍历图片数组,将图片逐一保存

    2024年02月07日
    浏览(53)
  • ❤️创意网页:打造简洁美观的网页轮播图(HTML简单实现轮播图)操作简单可以直接使用

    ✨ 博主: 命运之光 🌸 专栏: Python星辰秘典 🐳 专栏: web开发(简单好用又好看) ❤️ 专栏: Java经典程序设计 ☀️ 博主的其他文章: 点击进入博主的主页 前言: 欢迎踏入我的Web项目专栏,一段神奇而令人陶醉的数字世界! 🌌 在这里,我将带您穿越时空,揭开属于

    2024年02月17日
    浏览(47)
  • js实现左右切换轮播图效果

    实现效果: 自动向右循环播放 鼠标悬停,移出继续播放 点击向右按钮,跳到下一张 点击向左按钮,跳到上一张 保证图片的过渡效果完整呈现后,才能跳到下一张 底部圆点随图片位置切换激活状态 实现思路: 把第一张图片复制到最后一张 当播放到最后一张时,无缝切换到

    2024年01月20日
    浏览(57)
  • 前端Vue自定义轮播图视频播放组件 仿京东商品详情轮播图视频Video播放效果 可图片预览

    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随

    2024年02月15日
    浏览(54)
  • 三种js轮播实现方式详解(看一遍就会)

    1、替换scr(入门级) 效果图: 2、滚动条(进阶版) 效果图: 3、定位(豪华版) 效果图:

    2024年02月07日
    浏览(36)
  • JS实现轮播图的三种简单方法。

    实现思路 这可能是轮播图最简单点的实现之一,通过更改图片的src来实现该效果,首先需要将图片命名格式统一比如pic01.jpg,pic02.jpg…,再通过js使用定时器去改变img标签里面的src图片链接的名字来实现切换效果。代码如下: 实现效果 实现思路 这可能是轮播图最简单点的实现

    2024年02月03日
    浏览(49)
  • uniapp实现上传图片添加日期和地点水印,修复多张图片同时上传,显示相同图片问题

    整体实现流程:首先调用 uni.chooseImage 方法,配置count、sizeType、sourceType参数,分别代表选择的图片个数、original 原图,compressed 压缩图,默认二者都有、是从相册还是拍照。 然后在成功的回调中拿到上传的所有图片并存储。然后就是添加水印,调用 uni-getImageInfo 拿图片信息,

    2024年02月12日
    浏览(63)
  • 前端下载文件或者图片方式,window.open或者a标签形式

    1.通过a标签的方式下载文件 我们点击下载,发现是跳转到了百度的首页,并没有真的下载文件。 因为 a 标签下载只能下载 同源 的文件;如果是 跨域 的文件,比如图片、音视频等媒体文件等都无法使用上面的 a 标签方式下载。 上面的代码是直接通过书写 a 标签来实现文件下

    2024年02月03日
    浏览(65)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包