您的位置：首页 > Web前端 > JavaScript

HTML+CSS+JavaScript实现点击大于，小于号切换图片

2020-07-12 17:33 519 查看

大于号和小于号按钮不使用键盘上的，因为太细，效果没有这样好：

.sdater {
width: 8px;
height: 8px;
border-top: 4px solid white;
border-right: 4px solid white;
transform: rotate(45deg);
}

div盒子为正方形，先在上和右添加边框，最后翻转成菱形，就实现了大于号。当然，为了视觉效果，可以加上：

.sdater:hover {
padding: 5px;
background-color: grey;
}

鼠标划过反应。
小于号可以这样，就是在下和左添加边框即可：

.sdator {
width: 8px;
height: 8px;
border-bottom: 4px solid white;
border-left: 4px solid white;
transform: rotate(45deg);
}

鼠标划过：

.sdator:hover {
padding: 5px;
background-color: grey;
}

功能实现(JavaScript)：
图片切换可以使用z-index方法，点击大于号或小于号，z-index就在原来上+1（图片使用position: absolute实现重叠），完整代码：

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8" />
<title>Test</title>
<style>
* {
margin: 0;
transition: 0.5s;
}

.sdater {
width: 8px;
height: 8px;
border-top: 4px solid white;
border-right: 4px solid white;
transform: rotate(45deg);
}
.sdater:hover {
padding: 5px;
background-color: grey;
}
.sdator {
width: 8px;
height: 8px;
border-bottom: 4px solid white;
border-left: 4px solid white;
transform: rotate(45deg);
}
.sdator:hover {
padding: 5px;
background-color: grey;
}
#po1 {}

#po2 {}

#po3 {}

#po4 {}
</style>
</head>

<body>
<div style="margin: 0 auto;">
<div class="sdater" style="position: absolute; z-index: 9999; top: 180px; left: 585px;" onclick="Set_Photo_Right()"></div>
<div class="sdator" style="position: absolute; z-index: 9999; top: 180px; left: 5px;" onclick="Set_Photo_Left()"></div>
<img src="./img/1.jpg" style="width: 600px; position: absolute; z-index: 9997;" id="po1" />
<img src="./img/2.jpg" style="width: 600px; position: absolute; z-index: 9997;" id="po2" />
<img src="./img/3.jpg" style="width: 600px; position: absolute; z-index: 9997;" id="po3" />
<img src="./img/4.jpg" style="width: 600px; position: absolute; z-index: 9997;" id="po4" />
</div>
<script>
var count = 0;
var photo1 = document.getElementById("po1");
var photo2 = document.getElementById("po2");
var photo3 = document.getElementById("po3");
var photo4 = document.getElementById("po4");

function Set_Photo_Right() {
count++;
if (count == 1) {
photo1.style.zIndex = "9998";
} else if (count == 2) {
photo2.style.zIndex = "9998";
} else if (count == 3) {
photo3.style.zIndex = "9998";
} else if (count == 4) {
photo4.style.zIndex = "9998";
count = 0;
photo1.style.zIndex = "9997";
photo2.style.zIndex = "9997";
photo3.style.zIndex = "9997";
photo4.style.zIndex = "9997";
}
}

function Set_Photo_Left() {
count++;
if (count == 1) {
photo3.style.zIndex = "9998";
} else if (count == 2) {
photo2.style.zIndex = "9998";
photo3.style.zIndex = "9997";
} else if (count == 3) {
photo1.style.zIndex = "9998";
photo2.style.zIndex = "9997";
} else if (count == 4) {
photo1.style.zIndex = "9998";
count = 0;
photo1.style.zIndex = "9997";
photo2.style.zIndex = "9997";
photo3.style.zIndex = "9997";
photo4.style.zIndex = "9997";
}
}
</script>
</body>

</html>

其中的po1, po2, po3是用于ID选择。
不点击切换（大于号时）：
点击切换（大于号）后：点击切换（小于号）后：
我有4张1920x1200图片，4张图片最好都选择是1920x1200的，以免大小不一。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航