my要的轮播照片墙

最新推荐文章于 2022-11-03 01:04:15 发布

super_taotao

最新推荐文章于 2022-11-03 01:04:15 发布

阅读量585

点赞数

分类专栏： my 文章标签： html css j's

本文链接：https://blog.csdn.net/super_taotao/article/details/90653596

版权

my 专栏收录该内容

2 篇文章 0 订阅

订阅专栏


<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>照片墙</title> 
<style> 
	.div-main {margin：0 auto}
	.div-a{ float:left;width:55%;} 
	.div-a img {width:600px;height: 400px;}
	.div-b{ float:right;width:45%; } 
	.filmstrip li { width:100px; height:50px; overflow:hidden; }
	.filmstrip img { width:80px; height:45px; }
</style> 
<script>
	onload = function() {
		var number = 1;//用来控制什么跳右边缩略图
		var count = 0;//用来控制左边大图
		var lis = document.getElementsByTagName("li");
		var funny = function(i){
			if(i == 0)
			{
				lis[0].onclick = function(){
					number--;
					count--;
					//控制左边的大图
					if(count >= 0 && count <= 9)
					{
						var img = document.getElementById("large");
						img.src = "./img/image"+((count+1)%10)+".jpg";
					}else{
						count++;
					}
					
					//移动右边的缩略图向上一次
					if(number == -1)
					{
						for(var j=2;j<8;j++)
						{
							var img = document.getElementById("small"+j);
							img.src = "./img/image"+((j+count-1)%10)+".jpg";
						}
						number++;
					}
				}
			}
			if(i > 0 && i < lis.length-1)
			{
				lis[i].onclick = function(){
					var img = document.getElementById("large");
					var img2 = document.getElementById("small"+(i+1));
					img.src = img2.src;
				}
			}
			if(i == lis.length-1) 	
			{
				lis[lis.length-1].onclick = function(){
					number++;
					count++;
					
					//控制左边的大图
					if(count >= 0 && count <= 9)
					{
						var img = document.getElementById("large");
						img.src = "./img/image"+((count+1)%10)+".jpg";
					}else{
						count--;
					}
					
					//移动右边的缩略图向下一次
					if(number == 6)
					{
						for(var j=2;j<8;j++)
						{
							var img = document.getElementById("small"+j);
							img.src = "./img/image"+((j+count-6)%10)+".jpg";
						}
						number--;
					}
				}
			}
		}
		
		for(var i=0;i<lis.length;i++){
			funny(i);
		}
	}
</script>
</head> 
<body> 
<div id = "container" class = "div—main">
	<p>照片墙</p>
	<div class="div-a"><img id = "large" src = "img/image1.jpg" /> </div> 
		<div class="div-b">
				<ul id = "images" class="filmstrip">
					<li><img id = "small1" src="img/up.png" /></li>
					<li><img id = "small2" src="img/image1.jpg" /></li>
					<li><img id = "small3" src="img/image2.jpg" /></li>
					<li><img id = "small4" src="img/image3.jpg" /></li>
					<li><img id = "small5" src="img/image4.jpg" /></li>  
					<li><img id = "small6" src="img/image5.jpg" /></li>  
					<li><img id = "small7" src="img/image6.jpg" /></li>  
					<li><img id = "small8" src="img/down.png" /></li>
				</ul>
		</div> 
</div>
</body> 
</html>