<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
</style>
<link href="css/test.css" rel="stylesheet" />
</head>
<body>
<!--用 < 表示左半括号
< 用 > 表示右半括号>-->
<div id="box">
<img src="img/1.jpg" id="myImage">
<div id="box-left">
<</div>
<div id="box-right">></div>
</div>
<div class="circle">
<span id="span-1"></span>
<span id="span-2"></span>
<span id="span-3"></span>
<span id="span-4"></span>
</div>
<!--下面为js逻辑处理-->
<script type="text/javascript" src="js/test.js">
</script>
</body>
</html>
2.css代码
- {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#box {
height: 50%;
width: 50%;
background-color: gray;
margin-top: 10%;
margin-left: 20%;
/*background-image: url(img/5.jpg);
background-size: cover;*/
border: 1px solid cornflowerblue;
color: white;
font-size: 20px;
position: absolute;
}
#box img {
height: 100%;
width: 100%;
position: absolute;
}
.circle {
height: 5%;
width: 30%;
/background-color: red;/
margin-left: 27%;
position: absolute;
top: 72%;
}
.circle span {
background-color: darkgray;
border-radius: 50%;
display: inline-block;
height: 10px;
width: 10px;
margin-left: 5%;
cursor: pointer;
}
.circle span:hover {
background-color: lightpink;
}
#span-1 {
margin-left: 38%;
}
#box-left {
margin-top: 20%;
cursor: pointer;
position: inherit;
}
#box-right {
margin-top: 20%;
right: 0px;
cursor: pointer;
position: inherit;
}
#box div:hover {
color: powderblue;
}
3.js代码
//用于改变图片
var count = 1;
//获取所有的span元素
var spanArray = document.getElementsByTagName("span")
//获取图片
var myImage = document.getElementById('myImage');
//获取所有class="circle"的标签，存入一个数组
var circleNode = document.getElementsByClassName("circle")
//初始将第一个circle标记颜色
spanArray[0].style.backgroundColor = "lightpink"
//对存放图片区域进行监听
box.onclick = function(event) {
var Node = event.srcElement ? event.srcElement : event.target;
//实时监听图片变化，同步circle颜色变化 先进行判断是否时触发相应的点，以免浪费性能
if(Node.id == 'box-left' || Node.id == 'box-right') {
//更改图片
changImage(Node, myImage)
//实时监听图片变化，同步circle颜色变化 注意：这里一定要将monitorCircle放到changImage的后面执行
monitorCircle()
console.log("count=" + count)
} else {
console.log("你没有点击 < 和 >")
}
}
//点击circle触发图片发生变化
triggerCircle()
//每2秒向右滑动一次
timeChangImage(2000)
//点击< 和 >触发图片发生变化
function changImage(value, myImage) {
console.log(value.innerHTML);
//这里要注意：当点击 < 时value.innerHTML的值两边有空格，所以导致一直判断不相等
//处理办法：将字符串的两边空格去掉即可
if(value.innerHTML.trim() == '<') {
if(count - 1 == 0) {
count = 1
} else {
count -= 1
}
} else {
if(value.innerHTML == '>') {
if(count + 1 > 4) {
count = 1
} else {
count += 1
}
}
}
myImage.src = 'img/' + count + '.jpg';
console.log("图片路径:" + myImage.src)
}
//点击circle触发图片发生变化
function triggerCircle() {
circleNode[0].onclick = function(event) {
var id = ''
var number = 1
var Node = event.srcElement ? event.srcElement : event.target
console.log("event.srcElement：" + Node)
//获取元素的标签名---这里为大写的SPAN
var nodeName = Node.nodeName
console.log(event)
//拿到触发点击事件的元素
if(nodeName == 'SPAN') {
id = Node.id
console.log("span-id:" + id)
//获取span中id的number number类型为字符串 虽然系统会自动转换为整数夫，但还是将它转换为整数好
number = parseInt(id.split('-')[1])
console.log("number的类型:" + typeof number)
console.log("span-number:" + number)
//改变图片
myImage.src = 'img/' + number + '.jpg'
//并且将当前的circle颜色进行更改 且需要对count的值进行更改
count = number
monitorCircle()
} else {
console.log("Node不等于span")
}
}
}
//实时监听图片变化，同步circle颜色变化
function monitorCircle() {
//每次触发时，先将所有的circle的颜色变为原色
for(var i = 0; i < spanArray.length; i++) {
spanArray[i].style.backgroundColor = "darkgray"
}
spanArray[count - 1].style.backgroundColor = "lightpink"
}
//实现在定时切换图片
function timeChangImage(delay) {
setInterval(
function() {
console.log("进入定时器了")
//默认向右滑动
if(count + 1 > 4) {
count = 1
} else {
count += 1