<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background-color: #333333;
}
#box {
width: 400px;
height: 500px;
position: relative;
margin: 0 auto;
}
.black {
position: absolute;
width: 400px;
height: 30px;
background-color: #000;
top: 470px;
opacity: 0.8;
text-align: center;
}
.black1 {
position: absolute;
width: 400px;
height: 80px;
bottom: 35px;
}
#images {
position: absolute;
width: 400px;
height: 500px;
background-color: #eee;
}
.round {
width: 20px;
height: 20px;
background-color: #aaa;
border-radius: 10px;
display: inline-block;
margin-top: 5px;
margin-right: 10px;
}
.normal {
background-color: #aaa;
}
.active {
background-color: #FA7908;
}
a {
position: absolute;
width: 50px;
height: 50px;
background-color: #000;
opacity: 0.5;
color: #fff;
text-align: center;
font: 20px/50px 'microsoft yahei';
text-decoration: none;
top: 225px;
cursor: pointer;
}
a:hover {
opacity: 0.8;
}
#left {
left: 10px;
}
#right {
right: 10px;
}
.black1 img {
width: 80px;
height: 80px;
background-color: #009900;
position: absolute;
bottom: 0px;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>
<div id="box">
<img id="images" src="">
<span class="black"></span>
<span class="black1"></span>
<a id="left"><</a>
<a id="right">></a>
</div>
<script>
var oLeft = document.getElementById('left');
var oRight = document.getElementById('right');
var oImg = document.getElementById('images');
var oSpan = document.getElementsByTagName('span')[0];
var oSpan1 = document.getElementsByTagName('span')[1];
var aImg = ['img/1.png', 'img/2.png', 'img/3.png', 'img/4.png'];
//初始化
for (var i = 0; i < aImg.length; i++) {
var aDiv = oSpan.getElementsByTagName('div');
oSpan.innerHTML += '<div class="round">' + '</div>';
}
;
aDiv[0].className += ' active';
oImg.src = aImg[0];
//函数封装
function roll() {
oImg.src = aImg[num];
for (var i = 0; i < aImg.length; i++) {
aDiv[i].className = 'round normal';
}
aDiv[num].className = 'round active';
}
//图片切换
var num = 0;
oRight.onclick = function () {
num++;
if (num == 4) {
num = 0;
}
roll();
}
oLeft.onclick = function () {
num--;
if (num == -1) {
num = 3;
}
roll();
}
//点击按钮切换
for (var i = 0; i < aImg.length; i++) {
//点击索引值切换图片:
//设置索引值index
//用this指向
aDiv[i].index = i;
aDiv[i].onclick = function () {
//按钮变色
for (var i = 0; i < aImg.length; i++) {
aDiv[i].className = 'round normal';
}
this.className = 'round active';
//图片切换
oImg.src = aImg[this.index];
num = this.index;
}
}
//缩略图
for (var i = 0; i < aImg.length; i++) {
var aMinImg = oSpan1.getElementsByTagName('img');
oSpan1.innerHTML += '<img class="hide">';
aMinImg[i].src = aImg[i];
aMinImg[i].style.left = 100 + i * 35 + 'px';
aDiv.index = i;
aDiv[i].onmouseover = function () {
for (var i = 0; i < aImg.length; i++){
aMinImg[i].className = 'hide';
}
aMinImg[this.index].className = 'show';
}
aDiv[i].onmouseout = function () {
for (var i = 0; i < aImg.length; i++){
aMinImg[i].className = 'hide';
}
}
}
</script>
</body>
</html>
带缩略图的图片切换
最新推荐文章于 2022-12-20 11:12:10 发布