第3课--3.2带缩略图的图片切换效果_完成下方缩略图随图片切换而改变高亮效果-优快云博客

本文链接：https://blog.youkuaiyun.com/wcf1991/article/details/78369928

本文介绍了一个使用HTML和CSS实现的图片切换效果案例，通过简单的JavaScript交互实现图片的左右切换及底部缩略图预览功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>带缩略图的图片切换效果</title>
	<style>
	body,ul{
		padding:0;
		margin:0;
	}
	li{
		list-style:none;
	}
	a{
		text-decoration:none;
	}
	.clear{
		zoom:1;
	}
	.clear:after{
		content:"";
		display:block;
		clear:both;
		overflow:hidden;
	}                                /*样式重置*/
	body{
		width:1200px;
		background-color:black;
	}                                /*设置页面大小*/
	#wrap{
		position:absolute;
	}                                /*定位*/
	#wrap a{
		position:absolute;
		width:50px;
		height:50px;
		padding-top:8px;
		background:white;
		color:black;
		font:50px/40px"宋体";
		opacity:0.3;
	}
	#wrap a:hover{
		opacity:0.5;
	}
	#wrap #left_a{
		left:200px;
		top:260px;
	}
	#wrap #right_a{
		left:1110px;
		top:260px;
	}                                /*上一张，下一张标签设置*/
	#wrap img{
		position:absolute;
		left:280px;
		top:4px;
	}                                /*主要图片定位*/
	#wrap ul{
		width:240px;
		position:absolute;
		left:280px;
		top:608px;
		padding:0 280px;
	}									/*底部样式*/
	#wrap ul li{
		padding:0 6px;
		width:18px;
		height:18px;
		background:url(img/black/change.png) no-repeat 0 -18px;
		float:left;
	}
	#wrap ul li:hover{
		background:url(img/black/change.png) no-repeat 0 0px;
	}
	#wrap ul li .little_pic{
		position:absolute;
		display:none;	
	}                                /*底部样式结束*/
	</style>

	<script>
		window.onload = function(){
			var oWrap = document.getElementById("wrap");
			var Left_a = document.getElementById("left_a");
			var Right_a = document.getElementById("right_a");
			var Img = oWrap.getElementsByTagName("img");
			var oLi = oWrap.getElementsByTagName("li");                              //获取元素;
			var arrpic = ["img/black/1.jpg","img/black/2.jpg","img/black/3.jpg","img/black/4.jpg","img/black/5.jpg","img/black/6.jpg","img/black/7.jpg","img/black/8.jpg"];										//要用到的图片数组;

			var num = 0;
			var l = 0;
			var t = -156;
																					//变量定义;
			oLi[0].style.cssText = "background:url(img/black/change.png) no-repeat 0 0px;"  //打开网页时第一张图片的底部背景，默认样式;

			Right_a.onclick = function(){
				oLi[num].style.cssText = "background:url(img/black/change.png) no-repeat 0 1-18px;"//底部跟随变化;
				num ++;
				if(num == 8){
					num = 0;
				}
				Img[0].src = arrpic[num];
				oLi[num].style.cssText = "background:url(img/black/change.png) no-repeat 0 0px;"//底部跟随变化;
			}                                                                                   //当点击右边的示意下一张时，图片及底部样式变化;

			Left_a.onclick = function(){
				oLi[num].style.cssText = "background:url(img/black/change.png) no-repeat 0 -18px;"//底部跟随变化;
				num --;
				if(num == -1){
					num = 7;
				}
				Img[0].src = arrpic[num];
				oLi[num].style.cssText = "background:url(img/black/change.png) no-repeat 0 0px;"//底部跟随变化;
			}                                                                                  //当点击左边的示意上一张时，图片及底部样式变化;

			for(var i = 0;i < oLi.length;i++){

				oLi[i].innerHTML ='<img src = "img/black/'+ (i + 1) +'.png"/>';//在每个li中创建一个图片标签;
				oLi[i].getElementsByTagName("img")[0].style.display = "none";//将刚刚创建的图片标签隐藏;
				oLi[i].onmouseover = function(){

					for(var i = 0;i < oLi.length;i++){
						oLi[i].getElementsByTagName("img")[0].number = i;
					}                                                       //给li标签创建一个索引属性：number;

					l = this.getElementsByTagName("img")[0].number * 30 + 199;//计算出每次移动底部偏移量l的值;
					this.getElementsByTagName("img")[0].className = "little_pic";//找到每个li下面的图片并加上className;
					this.getElementsByTagName("img")[0].style.cssText = "display:block;left:"+ l +"px;top:"+ t +"px;"; //改变图片属性使其显示;
				}
				oLi[i].onmouseout = function(){
					this.getElementsByTagName("img")[0].style.display = "none";//当鼠标移开时，使其再次隐藏;
				}
			}	

			for(var i = 0;i < oLi.length;i++){
				for(var j = 0;j < oLi.length;j++){
						oLi[j].index = j;
					}															//给li创建索引属性：index;
				oLi[i].onclick = function(){
					oLi[num].style.cssText = "background:url(img/black/change.png) no-repeat 0 1-18px;"//底部跟随图片变化;
					num = this.index;				//使底部小圆与上一张下一张的变化同步;
					Img[0].src = arrpic[this.index];//让图片的变化和数组以及li的索引值建立关系;
					this.style.cssText = "background:url(img/black/change.png) no-repeat 0 0px;"//底部跟随图片变化;
				}
			}
				
		}
	</script>
</head>
<body>
	<div id = "wrap">
		<a id = "left_a" href = "#"><</a><a id = "right_a" href = "#">></a>
		<img src = "img/black/1.jpg"/>
		<ul class = "clear">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>

	</div>
</body>
</html>

下面是图片地址：打开从“http......ter"就可以看到！