页面实现效果：
直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*设置通配符消除浏览器的默认margin和padding*/
* {
margin: 0;
padding: 0;
}
/*这里面主要是设置背景的宽高,设置class属性为bg的样式*/
html,body,.bg {
height: 100%;
width: 100%;
}
/*给每一个背景图片设置图片路径,并让他不平铺,而且居中自适应显示*/
.bg:nth-child(1) {
background: url("img/1.jpg") no-repeat center/cover;
}
.bg:nth-child(2) {
background: url("img/2.jpg") no-repeat center/cover;
}
.bg:nth-child(3) {
background: url("img/3.jpg") no-repeat center/cover;
}
.bg:nth-child(4) {
background: url("img/4.jpg") no-repeat center/cover;
}
.bg:nth-child(5) {
background: url("img/5.jpg") no-repeat center/cover;
}
.bg:nth-child(6) {
background: url("img/6.jpg") no-repeat center/cover;
}
.bg:nth-child(7) {
background: url("img/7.jpg") no-repeat center/cover;
}
/*首先将所有背景图片隐藏*/
.bg {
display: none;
}
/*设置一个激活样式,当背景图片含有这个class属性的时候就会激活背景图片,以达到切换的效果*/
.bg-active {
display: block;
opacity: .8;
}
/*这里是设置中间导航栏的位置,这里是特殊的设置水平垂直居中的方式,只有在页面元素为100%的时候才能够这样设置，寬度可以根據圖片多少進行 調節*/
.main {
position: absolute;
width: 800px;
height: 260px;
/*background: pink;*/
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
/*取消ul的小圆点*/
.main ul {
list-style: none;
}
/*让他们浮动起来,设置固定宽高,并且加一个CSS3过渡效果的样式*/
.main ul li {
float: left;
width: 60px;
height: 260px;
transition: all 0.8s;
}
/*设置一个li的激活样式,当他激活的时候,宽度加宽,高度不变,背景图片变化*/
.main ul li.li-active {
width: 400px;
height: 260px;
background: #666666;
}
/*设置li标签里面的背景图片,这里面的背景图片需要和上面的全局背景图片对应上*/
.main ul li:nth-child(1) {
background: url("img/1.jpg") no-repeat center/cover;
}
.main ul li:nth-child(2) {
background: url("img/2.jpg") no-repeat center/cover;
}
.main ul li:nth-child(3) {
background: url("img/3.jpg") no-repeat center/cover;
}
.main ul li:nth-child(4) {
background: url("img/4.jpg") no-repeat center/cover;
}
.main ul li:nth-child(5) {
background: url("img/5.jpg") no-repeat center/cover;
}
.main ul li:nth-child(6) {
background: url("img/6.jpg") no-repeat center/cover;
}
.main ul li:nth-child(7) {
background: url("img/7.jpg") no-repeat center/cover;
}
/*设置li里面的div的宽高,这个是一个背景的效果,设置透明度*/
.main ul li div {
height: 260px;
width: 60px;
background: black;
opacity: .5;
}
/*设置div里面的p标签,让他居中显示,并且让他竖着显示出来*/
.main ul li div p{
color: white;
font-size: 12px;
width: 14px;
padding: 10px 20px;
}
</style>
</head>
<body>
<!--设置7张背景图片,当然也可以设置多张背景图片-->
<div class="bg bg-active"></div>
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
<!--这个是展示在中间的内容区域-->
<div class="main">
<!--里面设置一个类似于导航栏标签的内容,方便我们对于图片和背景图片的切换-->
<ul>
<li class="li-active"><div><p>晨光</p></div></li>
<li><div><p>觀海</p></div></li>
<li><div><p>星河</p></div></li>
<li><div><p>遠山</p></div></li>
<li><div><p>聽雨</p></div></li>
<li><div><p>雲海</p></div></li>
<li><div><p>落日</p></div></li>
</ul>
</div>
</body>
<script>
window.onload = function () {
/*获取所有的li*/
let lis = document.querySelectorAll('.main li');
/*获取所有的bg*/
let bgs = document.querySelectorAll('.bg');
/*遍历所有li标签,这里使用的是forEach循环*/
/*里面的item是lis里面的值,index是下标*/
/*这里面还有一个箭头函数,箭头函数的作用就是能够让this自动指向的问题*/
lis.forEach((item,index)=>{
/*给每个li绑定鼠标悬浮事件*/
item.onmouseover = () => {
/*清除所有样式,为了让点击之后的li样式跟随*/
lis.forEach((el,i) => {
el.className = '';
bgs[i].classList.remove('bg-active');
switch (i){
case 0:
document.querySelectorAll('.main li div p')[i].textContent = '晨光';
break;
case 1:
document.querySelectorAll('.main li div p')[i].textContent = '觀海';
break;
case 2:
document.querySelectorAll('.main li div p')[i].textContent = '星河';
break;
case 3:
document.querySelectorAll('.main li div p')[i].textContent = '遠山';
break;
case 4:
document.querySelectorAll('.main li div p')[i].textContent = '聽雨';
break;
case 5:
document.querySelectorAll('.main li div p')[i].textContent = '雲海';
break;
case 6:
document.querySelectorAll('.main li div p')[i].textContent = '落日';
break;
default:
break;
}
});
/*给激活之后的li赋予激活的样式*/
item.className = 'li-active';
/*激活背景图片*/
bgs[index].classList.add('bg-active');
switch (index){
case 0:
document.querySelectorAll('.main li div p')[index].textContent = '宿鸟动前林 晨光上东屋 ';
break;
case 1:
document.querySelectorAll('.main li div p')[index].textContent = '十里长滩云水阔 千堆雪浪玉生烟 ';
break;
case 2:
document.querySelectorAll('.main li div p')[index].textContent = '海上生明月 天涯共此时 ';
break;
case 3:
document.querySelectorAll('.main li div p')[index].textContent = '湖清霜镜晓 涛白雪山来 ';
break;
case 4:
document.querySelectorAll('.main li div p')[index].textContent = '何当共剪西窗烛 却话巴山夜雨时 ';
break;
case 5:
document.querySelectorAll('.main li div p')[index].textContent = '明月出天山 苍茫云海间 ';
break;
case 6:
document.querySelectorAll('.main li div p')[index].textContent = '夕阳无限好 只是近黄昏 ';
break;
default:
break;
}
}
});
}
</script>
</html>
提供相关图片，根据url地址建立目录及文件夹即可静态访问页面
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
