点击按钮图片变换

最新推荐文章于 2023-08-20 23:34:20 发布

xiaokehai

最新推荐文章于 2023-08-20 23:34:20 发布

阅读量835

点赞数

分类专栏： js 学习Web过程中的小总结

本文链接：https://blog.csdn.net/xiaokehai/article/details/50850512

版权

js 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

学习Web过程中的小总结

3 篇文章 0 订阅

订阅专栏

效果图：

实现的代码和解析如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">

#box{
height: 320px;
overflow: hidden;//将超出div块的图片隐藏起来
}
#box1 img{
display: block;
}
#box .btn_left,#box .btn_right{
width: 40px;
height: 40px;
border:5px solid white;
position:fixed;//给两个按钮定个固定位置
font-size: 40px;
line-height: 40px;
color: white;
border-radius: 100%;
text-align: center;
z-index: 2;
font-weight: bold;
}
#box .btn_left{
top:20%;
left: 20px;
}
#box .btn_right{
top:20%;
left:680px;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var oBox=document.getElementById('box');
var oBox1=document.getElementById('box1');

var btn=oBox.getElementsByTagName('span');
var aImg=oBox1.getElementsByTagName('img');
var num=0;//计数器（从0计到5）
btn[0].οnclick=function(){
//思想：
if(num<5){
//当num<5时，将所有的img隐藏，最后显示下标为num的img
for(var i=0;i<6;i++){
aImg[i].style.display="none";
}
aImg[num].style.display="block";
++num;
}else{//当num大于5时，初始化num=0
num=0;
}

};
btn[1].οnclick=function(){
//思想：
if(num>0){
//当num>0时将所有的img隐藏，最后显示下标为num的img
for(var i=0;i<6;i++){
aImg[i].style.display="none";
}
aImg[num].style.display="block";
--num;
}else{//当num小于0时，初始化num=5
num=5;
}
};
//鼠标移进的变化
btn[0].οnmοuseοver=function(){
btn[0].style.borderColor="#898585";
btn[0].style.color="#898585";
btn[0].style.backgroundColor="rgba(158,154,154,0.2)";
};
//鼠标移进的变化
btn[1].οnmοuseοver=function(){
btn[1].style.borderColor="#898585";
btn[1].style.color="#898585";
btn[1].style.backgroundColor="rgba(158,154,154,0.2)";

};
//鼠标移出的变化
btn[0].οnmοuseοut=function(){
btn[0].style.backgroundColor="";
btn[0].style.color="white";
btn[0].style.borderColor="white";

};
//鼠标移出的变化
btn[1].οnmοuseοut=function(){
btn[1].style.backgroundColor="";
btn[1].style.color="white";
btn[1].style.borderColor="white";
};
};

</script>
</head>
<body>

<div id="box">
<span class="btn_left"><</span>
<span class="btn_right">></span>
<div id="box1">
<img src="../img/1.jpg"/>
<img src="../img/2.jpg"/>
<img src="../img/3.jpg"/>
<img src="../img/4.jpg"/>
<img src="../img/5.jpg"/>
<img src="../img/6.jpg"/>
</div>

</div>
</body>
</html>

xiaokehai

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
点击按钮图片变换

效果图：实现的代码和解析如下：Document #box{ height: 320px; overflow: hidden;//将超出div块的图片隐藏起来 } #box1 img{ display: block;
复制链接

扫一扫

专栏目录