JS基础——图片切换的综合实例 js_hbuilder的js图片切换作业-CSDN博客

本文链接：https://blog.csdn.net/raosheng1993/article/details/45422331

[html] view plain copy

<pre name="code" class="html"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>10-图片切换综合实例</title>
<style>
p{ margin:0;}
.buttons{ text-align:center; margin-top:20px;}
#box{ width:400px; height:300px; border:10px solid #ccc; margin:15px auto; position:relative;}
#span1 ,#box a ,#p1 ,#strong1{ position:absolute;}
#box a{ width:40px; height:40px; border-radius:20px; text-align:center; line-height:40px; color:#000; background:rgba(255,255,255,.9); top:140px; font-weight:bold; font-family:Vernada; text-decoration:none;}
#box a:hover{ background:rgba(255,255,255,.8); -webkit-transition:.5s; -moz-transition:.5s; transition:.5s;}
#prev{ left:5px;}
#next{ right:5px;}
#p1 ,#strong1{ width:400px; height:30px; line-height:30px; text-align:center; background:rgba(0,0,0,.8); color:#fff; font-size:14px; left:0;}
#strong1{ top:0; font-weight:normal;}
#p1{ bottom:0;}
#img1{ width:400px; height:300px;}
</style>
<script>
window.onload = function(){
var aBtn = document.getElementsByTagName('input');
var oPrev = document.getElementById('prev');
var oNext = document.getElementById('next');
var oStrong = document.getElementById('strong1');
var oP = document.getElementById('p1');
var oImg = document.getElementById('img1');
var arrUrl = ['http://www.w3cfuns.com/data/attachment/album/201408/19/004625t5du798d0fyskowc.jpg','http://www.w3cfuns.com/data/attachment/album/201408/19/004628ftrm6hxhzkl8v11l.jpg','http://www.w3cfuns.com/data/attachment/album/201408/19/004622g4oo68an688ostn4.jpg.thumb.jpg','http://www.w3cfuns.com/data/attachment/album/201408/19/004620ldgo2c49dda2h64a.jpg.thumb.jpg'];
var arrText = ['图片一','图片二','图片三','图片四'];
var num = 0;
var onOff = true;
//循环播放
aBtn[0].onclick = function (){
onOff = true;
};
//顺序播放
aBtn[1].onclick = function (){
onOff = false;
}
//初始化函数
function initial(){
oStrong.innerHTML = (num+1) + '/' + arrText.length;
oP.innerHTML = arrText[num];
oImg.src = arrUrl[num];
};
initial();
//向左切换
oPrev.onclick = function(){
num--;
if(num == -1){
if(onOff){
//循环播放
num = arrText.length -1;
}else{
//顺序播放
alert('亲，已经是第一张了！');
num = 0;
}
}
initial();
};
//向右切换
oNext.onclick = function(){
num++;
if(num == arrText.length){
if(onOff){
//循环播放
num = 0;
}else{
//顺序播放
alert('亲，已经是最后一张了！');
num = arrText.length-1;
}
}
initial();
};
};
</script>
</head>
<body>
<div class="buttons">
<input id="btn1" type="button" value="循环播放">
<input id="btn2" type="button" value="顺序播放">
</div>
<div id="box">
<a id="prev" href="javascript:;"><</a>
<a id="next" href="javascript:;">></a>
<strong id="strong1">图片数量加载中...</strong>
<p id="p1">图片文字加载中...</p>
<img id="img1" />
</div>
</body>
</html>