点击下面的小图上面的大图切换，点击四个按钮价格切换，急求JS代码 原生JS，
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{margin:0;padding:0;}
#box ul:after{content: "";display: block;clear:both;width:0;height: 0;}
li{list-style:none;}
#img{width:500px;height: 300px;margin:0 auto;position: relative;}
#img li{position: absolute;top:0;left:0;width:500px;height:300px;font-size: 40px;text-align: center;line-height: 300px;display: none;border:1px solid red;background:#f4f4f4;color:blue;}
#img li.show{display: block;}
#list {width:500px;height:30px;line-height: 30px;color:#333;margin:0 auto;margin:20px auto;}
#list li{float:left;;background:green;width:125px;height:30px;text-align: center;line-height: 30px;font-size: 20px;}
#list li.active{background:blue;color:#fff;}
</style>
</head>
<body>
<div id="box">
<ul id="img">
<li class="show">图1</li>
<li>图2</li>
<li>图3</li>
<li>图4</li>
</ul>
<ul id="list">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script type="text/javascript">
var img = document.getElementById("img").getElementsByTagName("li");
var list = document.getElementById("list").getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
list[i].index = i;
list[i].onclick = function(){
for(var j = 0;j<list.length;j++){
list[j].className="";
img[j].style.display="none";
}
this.className="active";
img[this.index].style.display="block";
}
}
</script>
</body>
</html>
做了一个简单图片切换的效果，布局自己写，懒得写布局了。
价格同理，自己练习吧。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
