<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
list-style: none;
/*清除li的默认列表样式*/
margin: 0px;
padding: 0px;
}
.man{
width: 1000px; /*整体的框架*/
height: 700px;
margin:0px auto; /*整体居中*/
border: 0px solid;
}
.left{
float: left;
}
.left1{ /*左侧控制按钮*/
width: 196px;
height: 123px;
border: 1px solid #CCCCCC;
background: #48D1CC;
line-height: 123px;
text-align: center;
}
.right{ /*右侧大图*/
float: left;
width: 800px;
height: 498px;
border: 1px solid;
}
.right img{ /*控制右侧大图*/
width: 100%;
height: 100%;
}
.botton{ /*下侧小图整体框架*/
position: relative;
display: none;
margin-left: 100px;
}
.bot{ /*下侧小图*/
position:relative ;
border:1px solid black;
width: 300px;
height: 50px;
text-align: center;
line-height: 50px;
float: left;
left: 200px;
top: -60px;
background: peachpuff;
opacity: 0.9;
}
</style>
</head>
<body>
<div class="man" style="overflow:hidden;"> <!--最大的div-->
<div class="left"> <!--左边四个小的父级-->
<ul>
<li class="left1" style="background: white;">呆萌</li>
<!--左边四个小div 第一个设置白色css这样打开的时候第一个就是白色-->
<li class="left1">可爱</li>
<li class="left1">吃货</li>
<li class="left1">爱哭鬼</li>
</ul>
</div>
<div class="right">
<img class="right1" src="0.jpg"/>
</div> <!--右侧大图-->
<div class="botton" style="display: block;"> <!--下侧点击框的父级div -->
<ul>
<li class="bot">呆萌1</li>
<li class="bot">呆萌2</li>
</ul>
</div>
<div class="botton">
<ul>
<li class="bot">可爱1</li>
<li class="bot">可爱2</li>
</ul>
</div>
<div class="botton">
<ul>
<li class="bot">吃货1</li>
<li class="bot">吃货2</li>
</ul>
</div>
<div class="botton">
<ul>
<li class="bot">爱哭鬼1</li>
<li class="bot">爱哭鬼2</li>
</ul>
</div>
</div>
<script type="text/javascript">
window.onload=function(){
var leftt=document.getElementsByClassName("left1"); //获取左侧div
var rightt=document.getElementsByClassName("right1"); //获取右侧大图
var bott = document.getElementsByClassName("botton"); //获取bot父级元素
var bota = document.getElementsByClassName("bot"); //获取下侧bot
for (var j=0; j<4 ; j++) {
leftt[j].index=j;
leftt[j].onclick=function(){
for(var i=0; i<bott.length; i++){
bott[i].style.display="none";
leftt[i].style.background="#48D1CC"; //灰色
}
rightt[0].src=this.index+".jpg";
bott[this.index].style.display="block";
bota[(this.index)*2].style.background="#48D1CC";
leftt[this.index].style.background="white";
bota[((this.index)*2)+1].style.background="peachpuff";
}
}
//优化方法:
// 1. 变量i 无法获取循环过程中的值,只能获取到最后的结果, for循环是在页面打开时瞬间运行时间上非常快,
//if循环是一个(点击事件),只有(鼠标点击)时才运行,两者存在 时间差,if中无法获取到for中的数值,需要新建一个新数组来
//保存i的值来,最后赋值给this (如果index不能用的话可以新建一个空数组用j来赋值);
// 2. 使用时,无法直接找到i的新保存地址
for (var i=0; i<8; i++) {
bota[i].index=i;
bota[i].onclick=function(){ //点击事件给些for循环里面了
for (var c=0; c<8; c++) {
bota[c].style.backgroundColor="peachpuff";
}
bota[this.index].style.backgroundColor="#48D1CC";
rightt[0].src=this.index+".jpg";
}
}
}
</script>
</body>
</html>
js table选项卡切换
最新推荐文章于 2024-05-20 14:31:08 发布