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

自学JS之切换图片进阶篇章

2016-11-30 23:56 148 查看

今天要展示的是平时在网页上面看到的如何切换图片：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片切换小示例</title>
<style>
#box{
width:1000px;
height:1000px;
margin:50px auto 0;
position:relative;
}
a {
width:80px; height:840px;
background:gainsboro;
filter:alpha(opacity:80); opacity:0.8;
position:absolute;
top:160px; font-size:58px;
color:#000; text-align:center;
line-height:840px;
text-decoration:none;
}
a:hover {
filter:alpha(opacity:30); opacity:0.3;
}
#prev { left:10px; }
#next { right:10px; }
#img1 { width:800px; height:800px; padding: 160px 100px;}

</style>
</head>
<body>
<div id="box">
<a id="prev" href="javascript:;"><</a>
<a id="next" href="javascript:;">></a>
<img id="img1" src="img/001.jpg"/>
</div>
<script>
var oPrev = document.getElementById('prev');
var oNext = document.getElementById('next');
var oImg = document.getElementById('img1');
var arrUrl = [ 'img/001.jpg', 'img/002.jpg', 'img/003.jpg', 'img/004.jpg' ,'img/005.jpg'];
var num = 0;

oPrev.onclick = function (){
if(num>0){
num--;
oImg.src = arrUrl[num];//利用数组下标动态的查找图片
}
}
oNext.onclick = function (){
if(num<arrUrl.length-1){
num++;
oImg.src = arrUrl[num];
}

}
</script>
</body>
</html>

效果如下：

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

标签：

相关文章推荐

新的分享

章节导航