html吧 关注：182,166贴子：1,338,708
- 3回复贴，共1页
先了解一点JS的基本知识就可以制作出来了，只是很粗糙，需要更多的相关知识
比如动画效果实现，轮播效果实现，太急躁是不行的，毕竟一口气也吃不成一个胖子，是吧
给你一个小例子，希望可以启发你一下
<html>
<body>
<img class="img-box" alt="我是要被替换的图片" src="1.jpg"></img>
<div class="buttom-style" onclick="buttom();">我是按钮，按下后将被替换为地址为2.JPG的图片</div>
</body>
<style>
.img-box{
top: 50px;
left: 50px;
position: relative;
width: 400px;
height: 200px;
}
.buttom-style{
top: 80px;
left: 120px;
position: relative;
width: 200px;
height: 80px;
background-color: #00AA00;
}
</style>
<script type="application/javascript">
var img_box = document.querySelector(".img-box");
function buttom(){
alert("图片被替换了");
img_box.src = "2.jpg";
}
</script>
</html>
注意目录下必须要有一个原图片1.JPG和一个被替换的图片2.JPG
比如动画效果实现，轮播效果实现，太急躁是不行的，毕竟一口气也吃不成一个胖子，是吧
给你一个小例子，希望可以启发你一下
<html>
<body>
<img class="img-box" alt="我是要被替换的图片" src="1.jpg"></img>
<div class="buttom-style" onclick="buttom();">我是按钮，按下后将被替换为地址为2.JPG的图片</div>
</body>
<style>
.img-box{
top: 50px;
left: 50px;
position: relative;
width: 400px;
height: 200px;
}
.buttom-style{
top: 80px;
left: 120px;
position: relative;
width: 200px;
height: 80px;
background-color: #00AA00;
}
</style>
<script type="application/javascript">
var img_box = document.querySelector(".img-box");
function buttom(){
alert("图片被替换了");
img_box.src = "2.jpg";
}
</script>
</html>
注意目录下必须要有一个原图片1.JPG和一个被替换的图片2.JPG
