图片切换（不用js）

最新推荐文章于 2022-10-26 10:53:25 发布

杨健yj

最新推荐文章于 2022-10-26 10:53:25 发布

阅读量551

点赞数

分类专栏：其他文章标签： css 图片

本文链接：https://blog.csdn.net/yj1556492839/article/details/76269520

版权

其他专栏收录该内容

30 篇文章 0 订阅

订阅专栏

图片切换（不用js）

根据老师上课内容整理

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">

/*样式重置*/
body, ul{
padding: 0; margin: 0;
}
ul{ list-style: none }
/*设置包裹器样式*/
.wrapper{
width: 540px;
margin: 0 auto;
}
img{
/*设置元素宽度为 100% 与父元素宽度一致，随着父元素宽度变化而变化*/
width: 100%;
}
.banner{ position: relative;
/*如果是绝对定位造成的父元素高度塌陷，使用height撑起父元素的高度*/
height: 340px;
}
/*.banner:after{*/
/*content: "";*/
/*display: table;*/
/*clear: both;*/

/*}*/
.banner li img{
/*通过绝对定位让所有图片显示在同一位置*/
position: absolute;
/*支持移动端*/
top: 0;
left: 0;
}

/*隐藏所有li,除了第一个*/
.banner li{ visibility: hidden}
.banner li:first-child{visibility: visible}/*选取li父元素的第一个子元素li。而且，冒号和li之间不能有空格*/

/*当banner的li处于:target时，显示*/
.banner li:target{ visibility: visible}

.thumbnail li{
float: left;
width: 90px;
}
/*当鼠标悬浮在li时，元素透明*/
.thumbnail li:hover{
opacity: .5;
}
</style>
</head>
<body>

<div class="wrapper">


<ul class="banner">
<li id="jd001"><img src="img/jd001.jpg" alt=""></li>
<li id="jd002"><img src="img/jd002.jpg" alt=""></li>
<li id="jd003"><img src="img/jd003.jpg" alt=""></li>
<li id="jd004"><img src="img/jd004.jpg" alt=""></li>
<li id="jd005"><img src="img/jd005.jpg" alt=""></li>
<li id="jd006"><img src="img/jd006.jpg" alt=""></li>
</ul>



<ul class="thumbnail">

<li><a href="#jd001"><img src="img/jd001.jpg" alt=""></a></li>
<li><a href="#jd002"><img src="img/jd002.jpg" alt=""></a></li>
<li><a href="#jd003"><img src="img/jd003.jpg" alt=""></a></li>
<li><a href="#jd004"><img src="img/jd004.jpg" alt=""></a></li>
<li><a href="#jd005"><img src="img/jd005.jpg" alt=""></a></li>
<li><a href="#jd006"><img src="img/jd006.jpg" alt=""></a></li>
</ul>

</div>

</body>
</html>