js通过display属性实现（按钮）（圆点）双控制及（自动）图片轮播

最新推荐文章于 2024-07-24 23:00:08 发布
最新推荐文章于 2024-07-24 23:00:08 发布
阅读量1.5k 收藏 1
点赞数
文章标签： js 图片轮播 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32021025/article/details/84872123
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		.container{
			width: 500px;
			height: 300px;
			margin:0 auto;
			position: relative;
		}
		img{
			display: block;
			width:500px;
			height: 300px;
			position: absolute;
		}
		button{
			display: block;
			width: 50px;
			height: 100px;
			position: absolute;
			top:100px;
		}
		button:nth-of-type(2){
			right: 0;
		}
		.show{
			display: block;
					}
		.dispear{
			display: none;
		}
	.li-cotainer{
		width: 130px;
		position: absolute;
		bottom: 0;
		left:100px;
		font-size: 0;
	}
	.li-cotainer>li{
		display: inline-block;
		width: 10px;
		height: 10px;
		border: 1px solid #FFFFFF;
		border-radius: 50%;
		margin: 10px ;
	}
	.ls{
		background: #ffffff;
		border: 1px solid #FFFFFF;
	}
	</style>
	<body>
		<div class="container">
			<img class="show"src="img/1.jpg" >
			<img src="img/2.jpg" >
			<img src="img/3.jpg" >
			<img src="img/4.JPG" >
			<button><</button>
			<button >></button>
			<div class="li-cotainer">
				<li class="ls"></li>
				<li></li>
				<li></li>
				<li></li>
			</div>
		</div>
		<script type="text/javascript">
// 事件源获取
			var btn=document.getElementsByClassName("container")[0].getElementsByTagName("button");
			var imgArr=document.getElementsByClassName("container")[0].getElementsByTagName("img");
			var liArr=document.getElementsByClassName("container")[0].getElementsByTagName("li");
// 定义全局变量i,可以说是个计数器记录当前显示图片在图片数组中的下标
			var i=0;
// 右滑动执行及圆点按钮独立事件关联
			btn[1].onclick=function(){
			for(var c=0;c<imgArr.length;c++){
				if(imgArr[c].className=="show"){
					i=c;
				}
			}	
			right();
		}
		// btn[1].onclick=right;
// 左滑动执行及圆点按钮独立事件关联
		btn[0].onclick=function(){
				for(var c=0;c<imgArr.length;c++){
					if(imgArr[c].className=="show"){
						i=c;
					}
				}	
				left();
			}
			// btn[0].onclick=left;
// 圆点图片关联执行	
			for(var j=0;j<liArr.length;j++){
				liArr[j].index=j;
				liArr[j].onmouseover=lim;
						}
// 右滑动方法
			function right(){
				// console.log(i)
					i=i+1;
					console.log(i)
				for(var j=0;j<imgArr.length;j++){
					imgArr[j].className="dispear";
					liArr[j].className="";
					}
				if(i>3){
					i=0;
				}
				imgArr[i].className="show";
				liArr[i].className="ls"
				
				}
// 左滑动方法
				function left(){
						i=i-1;
					for(var j=0;j<imgArr.length;j++){
						imgArr[j].className="dispear";
						liArr[j].className="";
						}
					if(i<0){
						i=3;
					}
					imgArr[i].className="show";	
					liArr[i].className="ls"
					}
// 圆点图片关联方法
				function lim(){
						for(var k=0;k<imgArr.length;k++){
						imgArr[k].className="dispear";
						liArr[k].className="";
							}
						imgArr[this.index].className="show";
						liArr[this.index].className="ls";
						//i=this.index;
									}
				
// 图片滑动定时器设置及执行
				inter1=setInterval(right,3000);
				for(var t=0;t<imgArr.length;t++){
					document.getElementsByClassName("container")[0].onmouseover=function(){
						clearInterval(inter1);
					}
					document.getElementsByClassName("container")[0].onmouseout=function(){
					inter1=setInterval(right,3000);
				}
				}
		</script>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述

前端从爬上楼到滚下楼
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
js通过opacity属性实现（按钮）（圆点）双控制及（自动）图片轮播
qq_32021025的博客
12-07 1042
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;style type="text/css"&gt; .container{
网页轮播图的实现
weixin_52153452的博客
12-10 4004
轮播图，实现自动播放，左右切换
js 怎么获得写在css文件中的display属性
菜鸟史
07-14 4722
无标题文档 #abc{display:block;} function getStyle(obj,attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return document.defaultView.getComputedStyle(obj,false)[attr];
JS img标签本地图片预览
l371890934的博客
04-27 1583
上传图片时， 用于将本地上传的图片在页面中预览            #imageInput   input  文档上传按钮 #sub-img-a  图片预览 img标签 $("#imageInput").change(function(){                 var url ;                 if (window.createObjec
JavaScript控制元素（标签）的显示与隐藏
cnds123的专栏
12-24 2万+
JavaScript控制元素（标签）的显示与隐藏，有多种方式实现。
JS 控制div的可见和隐藏 display
weixin_50784508的博客
06-11 1688
【代码】JS 控制div的可见和隐藏 display。
JS圆形控制按钮的横向图片轮播特效代码.rar
07-09
在本文中，我们将深入探讨如何使用JavaScript实现一个圆形控制按钮的横向图片轮播特效。这个特效是通过纯JavaScript编写的，没有依赖任何主流的类库，如jQuery或Mootools。这种实现方式不仅可以提高页面加载速度，还...
JS实现图片轮播效果.docx
12-31
以上代码实现了基本的图片轮播效果，包括图片的平滑切换、指示器的更新以及箭头按钮的交互。你可以根据实际需求调整CSS样式，或者添加更复杂的动画效果，如淡入淡出、缩放等。同时，可以考虑添加自动播放功能，以及...
JavaScript实现轮播图片完整代码
10-15
JavaScript 实现轮播图片是一种常见的网页动态效果，用于展示多张图片并自动切换，提供良好的用户体验。本示例代码提供了一种简洁的实现方法，主要包括以下几个关键知识点： 1. HTML 结构：HTML 部分定义了一个包含...
jquery左右按钮控制图片滑动轮播切换特效源码.zip
11-01
开发者通过编写jQuery代码，可以实现对图片轮播的自动化控制，包括自动播放、定时切换、触碰滑动等功能。 首先，我们需要了解HTML结构，通常包含一个容器元素（如div）用于装载所有图片，每个图片被封装在一个单独...
用JS来控制DIV样式的display属性
01-08
用JS来控制DIV样式的display属性 这上我以前做一个留言本的 一个弹出登陆模块 我根据你的需求稍做改变，你可以自己改一下就可以用
js实现简单的无缝轮播效果
11-19
- `.control` 是控制按钮的容器，通过显示和隐藏控制类(`display:none` 和 `display:block`) 控制其可见性。 - `span` 对象代表左右箭头，用于手动切换图片。 6. **无缝轮播原理**： - 通过克隆第一个`li`元素并...
基于html+js实现轮播图（自动轮播、左右按钮、小圆点点击及切换图片）
热门推荐
未休的博客
02-18 3万+
基于html+js实现轮播图（自动轮播、左右按钮、小圆点点击及切换图片）
display: table-row; 实现等高布局
li3196672779的博客
06-25 3468
Document * { padding: 0; margin: 0; } #box { display: table-row; } #img { display: table-
关于“怎么通过js控制display“问题
L2395183536的博客
12-16 2657
关于"怎么通过js控制display"问题 通过js改变元素样式，display属性。废话不多说，直接上代码。 var tianqilj=document.getElementById("tianqilj"); tianqilj.addEventListener('click',function(){ var tianqi=document.getElementById("tianqi") if(tianqi.style.display=="none"){ tianqi.style
JS——JavaScript入门【JavaScript 之 display显示和隐藏】
qq_43201350的博客
07-24 1464
JS——JavaScript入门【JavaScript 之 display显示和隐藏】
轮播图的两种简单方式（display，src）
weixin_52120405的博客
03-28 605
方法一： HTML <body> <div class="banner"> <a href="#"> <img src="images/01.jpg" alt="banner"> </a> </div> </body> CSS *{ padding: 0; margin: 0; } .banner{ width: 700px
理解与应用css中的display属性
weixin_34124577的博客
11-13 2219
理解与应用css中的display属性 　　display属性是我们在前端开发中常常使用的一个属性，其中，最常见的有： none block inline inline-block inherit 　　下面，我将按照顺序将上述几种属性做一个完整的讲解。 第一部分：display:none 　　none这个值表示此元素将不被显示。比如，当我们在浏览网页时，如果看到了某个烦人...
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
最新发布
yangshuquan的专栏
07-24 816
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
js无缝轮播没有左右按钮，移入小圆点改变图片
06-08
实现 JS 无缝轮播，鼠标移入小圆点改变图片的方法有很多，以下是其中一种实现方式： HTML 代码： ```html <div id="slider"> <ul id="slider-list"> <li><img src="img/1.jpg" alt="图片1"></li> <li><img src="img/2.jpg" alt="图片2"></li> <li><img src="img/3.jpg" alt="图片3"></li> <li><img src="img/4.jpg" alt="图片4"></li> <li><img src="img/5.jpg" alt="图片5"></li> </ul> <ul id="slider-dots"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> ``` CSS 代码： ```css #slider { position: relative; width: 600px; height: 400px; overflow: hidden; } #slider-list { position: absolute; width: 3000px; height: 400px; padding: 0; margin: 0; list-style: none; transition: left 0.5s ease; } #slider-list li { float: left; width: 600px; height: 400px; } #slider-dots { position: absolute; right: 20px; bottom: 20px; padding: 0; margin: 0; list-style: none; } #slider-dots li { display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background-color: #ccc; cursor: pointer; } #slider-dots li.active { background-color: #f00; } ``` JS 代码： ```javascript window.onload = function() { var sliderList = document.getElementById("slider-list"); var sliderItems = sliderList.getElementsByTagName("li"); var sliderDots = document.getElementById("slider-dots"); var sliderDotItems = sliderDots.getElementsByTagName("li"); var sliderIndex = 0; var maxIndex = sliderItems.length / 2 - 1; var animateInterval; // 复制列表项，实现无缝轮播 sliderList.innerHTML += sliderList.innerHTML; // 自动轮播 animateInterval = setInterval(function() { sliderIndex++; if (sliderIndex > maxIndex) { sliderList.style.left = "0px"; sliderIndex = 1; } sliderList.style.left = -(sliderIndex * 600) + "px"; setActiveDot(); }, 2000); // 鼠标移入小圆点切换图片 for (var i = 0; i < sliderDotItems.length; i++) { sliderDotItems[i].index = i; sliderDotItems[i].onmouseover = function() { sliderIndex = this.index; sliderList.style.left = -(sliderIndex * 600) + "px"; setActiveDot(); }; } // 设置当前小圆点状态 function setActiveDot() { for (var i = 0; i < sliderDotItems.length; i++) { sliderDotItems[i].className = ""; } sliderDotItems[sliderIndex % 5].className = "active"; } }; ``` 这段代码实现了一个横向方向的无缝轮播，每隔两秒钟切换一张图片。鼠标移入小圆点切换图片。可以根据实际需要进行修改。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值