HTML《轮播图的实现》

最新推荐文章于 2024-05-28 19:26:08 发布

st紫月

最新推荐文章于 2024-05-28 19:26:08 发布

阅读量532

点赞数 1

分类专栏： HTML/CSS 文章标签： html css3 css

本文链接：https://blog.csdn.net/ziyue13/article/details/116166603

版权

HTML/CSS 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

思路：
把全部图片的路径放在一个数组里，用一个全局变量来记录当前图片的路径的数组下标，当切换页面的时候把这个下标对应的数组内容给图片的背景。给每个小圆圈一个自定义属性index，当点击它的时候把它的自定义属性给k，再设置图片背景即可

1.背景图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.div1{
				width: 800px;
				height: 225px;
				margin: 200px auto;
				border: 1px solid red;
				background-image: url('./images/bann_images/01.jpg');
				background-repeat: no-repeat;
				background-size: 100%;
				position: relative;
			}
			.div2{
				width: 50px;
				height: 120px;
				position: absolute;
				top: 50px;
				left: 0;
				background-image: url('./images/bann_images/ban_next.png');
				cursor: pointer;
			}
			.div3{
				width: 50px;
				height: 120px;
				position: absolute;
				top: 50px;
				right: 0;
				background-image: url('./images/bann_images/ban_pre.png');
				cursor: pointer;
			}
			.div4{
				width: 100px;
				height: 20px;
				position: absolute;
				top: 190px;
				left: 300px;
			}
			.div4 li{
				width: 10px;
				height: 10px;
				float: left;
				list-style: none;
				background-color: white;
				border-radius:50%;
				margin-left: 5px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<div class="div2">
				
			</div>
			<div class="div3">
				
			</div>
			<div class="div4">
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>
		<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var arr=['./images/bann_images/01.jpg','./images/bann_images/02.jpg','./images/bann_images/03.jpg','./images/bann_images/04.jpg'];
			var lis = document.querySelectorAll('.div4 li');
			var div1 = document.querySelector('.div1');
			var k=0;
			lis[0].style.backgroundColor='red';
		   console.log(lis.length);
		   //给li设置自定义属性
		   for(var i=0;i<lis.length;i++){
			   lis[i].index=i;
		   }
		   //单击小li事件
		   for(var i=0;i<lis.length;i++){
			   lis[i].addEventListener('click',function(){
				   div1.style.backgroundImage="url("+arr[this.index]+")";
				   k=this.index;
				   for(var i=0;i<lis.length;i++){
					   lis[i].style.backgroundColor='';
				   }
				   this.style.backgroundColor='red';
			   })
		   }
		   //单击下一页事件
			$('.div1 .div2').on('click',function(){
				if(k==3){
					k=0;
				}else{
					k++;
				}
				//console.log(k);
				$('.div1').css('backgroundImage',"url('./images/bann_images/0"+(k+1)+".jpg')");
				for(var i=0;i<lis.length;i++){
					lis[i].style.backgroundColor='';
				}
				lis[k].style.backgroundColor='red';
			})
			//单击上一页事件
			$('.div1 .div3').on('click',function(){
				 if(k==0){
					k=3;
				}else{
					k--;
				}
				console.log(k);
				$('.div1').css('backgroundImage',"url('./images/bann_images/0"+(k+1)+".jpg')");
				for(var i=0;i<lis.length;i++){
				  lis[i].style.backgroundColor='';
				}
				lis[k].style.backgroundColor='red';
			});
			//时间到的时候主动触发点击下一页事件
			setInterval(function(){
				$('.div1 .div2').click();
			},3000)
			
		</script>
		
	</body>
</html>

img标签插入图片：

window.onload=function(){
	
	var arr = ["img/1.png","img/2.png","img/3.png","img/4.png"];
	var body1 = document.querySelector('.body');
	var right = body1.querySelector('.right');
	var r4 = right.querySelector('.r4');
	var lis = r4.querySelectorAll('li');
	var img = right.querySelector('.r3 .content img');
	var imgleft = right.querySelector('.r3 .leftimg');
	var imgright = right.querySelector('.r3 .rightimg');
	console.log(lis);

	var k=0;
	//给li设置自定义属性
	for(var i=0;i<lis.length;i++){
	   lis[i].index=i;
	}
	//单击小li事件
	for(var i=0;i<lis.length;i++){
	   lis[i].addEventListener('click',function(){
		   img.src=arr[this.index];
		   k=this.index;
		   for(var i=0;i<lis.length;i++){
			   lis[i].style.backgroundColor='#D9D9D9';
		   }
		   this.style.backgroundColor='#767f8b';
	   })
	}
	//单击下一页事件
	imgright.addEventListener('click',function(){
		if(k==3){
			k=0;
		}else{
			k++;
		}
		img.src=arr[k];
		for(var i=0;i<lis.length;i++){
			lis[i].style.backgroundColor='#D9D9D9';
		}
		lis[k].style.backgroundColor='#767f8b';
	})
	
	//单击上一页事件
	imgleft.addEventListener('click',function(){
		if(k==0){
			k=3;
		}else{
			k--;
		}
		img.src=arr[k];
		for(var i=0;i<lis.length;i++){
			lis[i].style.backgroundColor='#D9D9D9';
		}
		lis[k].style.backgroundColor='#767f8b';
	})
	
}

st紫月

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML《轮播图的实现》

思路：把全部图片的路径放在一个数组里，用一个全局变量来记录当前图片的路径的数组下标，当切换页面的时候把这个下标对应的数组内容给图片的背景。给每个小圆圈一个自定义属性index，当点击它的时候把它的自定义属性给k，再设置图片背景即可...
复制链接

扫一扫