<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>浏览图片</title>
<!-- 样式-->
<style>
*{
margin:0px;
padding: 0px;
}
.ct{
margin: 0 auto;
width: 500px;
}
.pic{
height: 500px;
}
.an{
width: 180px;
}
</style>
<!-- script-->
<script>
var dq =1;
function shangyiye(){
dq--;
var xyy = document.getElementById('xyy')
xyy.removeAttribute('disabled');
if(dq ==1){
var syy = document.getElementById('syy')
syy.setAttribute('disabled','disabled');
}
var newImgSrc = "img/"+dq+".jpg";
//获取img节点
var tp = document.getElementById("tp");
//修改tp节点的属性
tp.setAttribute("src",newImgSrc);
}
function xiayiye(){
dq++;
var syy = document.getElementById('syy');
syy.removeAttribute('disabled');
if(dq == 14)
{
var xyy = document.getElementById('xyy');
xyy.setAttribute('disabled','disabled');
}
var newImgSrc = "img/"+dq+".jpg";
//获取img节点
var tp = document.getElementById("tp");
//修改tp节点的属性
tp.setAttribute("src",newImgSrc);
}
var flag = false;
function zd(){
var text = document.getElementById('zd').innerHTML;
if(text == '自动播放')
{
document.getElementById('zd').innerHTML='停止';
flag = true;
zdfy();
}
else if(text == '停止')
{
document.getElementById('zd').innerHTML='自动播放';
flag = false;
}
}
function zdfy(){
if(dq==14)
{
dq= 0;
}
xiayiye();
if(flag)
{
setTimeout('zdfy()',2000);
}
}
</script>
</head>
<body>
<div id="d1" class="ct pic">
<img id="tp" width="500px" height="500px" src="../7_21 js/img/1.jpg" alt=""/></div>
<div id="d2" class="ct bt">
<div class="ct an">
<button disabled="disabled" id="syy" οnclick="shangyiye()">上一页</button>
<button id="zd" οnclick="zd()">自动播放</button>
<button id="xyy" οnclick="xiayiye()">下一页</button>
</div>
</div>
<!--音频标签-->
<audio src="3.mp3" controls="controls" loop="-1" autoplay="autoplay" hidden="hidden">
</audio>
</body>
</html>
JS 控制图片在浏览器上幻灯片式自动播放
最新推荐文章于 2024-07-30 13:04:17 发布