目标效果（点击两边按钮切换图片）
demo.gif
涉及知识
1.html
2.JavaScript
3.css
准备素材
a.jpg、b.jpg、c.jpg、d.jpg、left.png、right.png
index.html、script.js、style.css
思路
（1）html：显示静态图片及两个图标按钮；
（2）js：新建数组，将图片名放入-->获取左右图标，添加点击事件
-->处理好切换到边界时的下标；
（3）css：把组件的位置处理一下。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图简例</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="all">
<img src="a.jpg" id="img"/>
<span class="left"><img src="left.png"/></span>
<span class="right"><img src="right.png"/></span>
<input type="text" id="show" placeholder="show the number of picture."/>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
script.js
var text = document.getElementById("show");
var img = document.getElementById("img");
var spans = document.getElementsByTagName("span");
var images = ["a.jpg", "b.jpg", "c.jpg", "d.jpg"];
var left = spans[0];
var right = spans[1];
var index = 0;
left.onclick = function () {
if (index == 0) {
index = images.length;
}
index--;
img.src = images[index];
show.value = index;
}
right.onclick = function () {
if (index == images.length - 1) {
index = -1;
}
index++;
img.src = images[index];
show.value = index;
}
style.css
/*body清零*/
body {
margin: 0;
padding: 0;
}
/*面向所有组件的设置*/
.all {
width: 440px;
height: 350px;
margin: 10% auto;
border: 1px silver dotted;
background-color: rgba(229, 238, 204, .5);
}
/*图片显示区域*/
.all > img {
margin-left: 20px;
margin-top: 20px;
width: 400px;
height: 300px;
}
/*左右切换图标*/
.all > span > img {
width: 40px;
height: 80px;
opacity: 0.7;
filter: alpha(opacity=70); /* IE8 及其更早版本 */
}
/*向左图标*/
.all .left {
cursor: pointer;
position: relative;
left: 18px;
top: -197px;
}
/*向右图标*/
.all .right {
cursor: pointer;
position: relative;
left: 335px;
top: -199px;
}
网友评论