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

js实现图片自动切换

2017-10-31 22:00 609 查看

说明：通过计时器使得图片每间隔几秒可以自动切换，也可以通过鼠标的点击控制播放的图片。

html代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图片自动切换</title>
<link rel="stylesheet" type="text/css" href="qiehuan2.css">

<script>
window.onload=function(){
var oDiv=document.getElementById("box");
var oImg=oDiv.getElementsByTagName("img")[0];
var oSpan=oDiv.getElementsByTagName("span")[0];
var oP=oDiv.getElementsByTagName("p")[0];
var oUl=oDiv.getElementsByTagName("ul")[0];
var oLi=oUl.getElementsByTagName("li");

var arrUrl=['1.png','2.png','3.png','4.png'];
var arrText=['图片一','图片二','图片三','图片四'];
var num=0;

//初始化
function fnTab(){
oImg.src=arrUrl[num];
oSpan.innerHTML=1+num+'/'+arrUrl.length;
oP.innerHTML=arrText[num];
for(var i=0;i<oLi.length;i++){
oLi[i].className='';
}
oLi[num].className='active';
}
fnTab();

//计时
var timer=null;
function show(){
num++;
num%=arrText.length; //计算播放哪张图片
fnTab();
}

function autoPlay(){
timer=setInterval(show,2000); //图片播放间隔为2秒
}

setTimeout(autoPlay,2000); //2秒后自动播放

function stopPlay(){
clearTimeout(timer);
}
oDiv.onmouseover = stopPlay;

oDiv.onmouseout = autoPlay;

for(var i=0;i<oLi.length;i++){
oLi[i].index=i;
oLi[i].onclick=
be3f
function (){
num=this.index;
fnTab();
};
}

};
</script>
</head>

<body>
<div id="box" class="box">
<img src=""/>
<span>数量正在加载中...</span>
<p>文字说明正在加载中...</p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>

css代码：

body{
background:#333;
}

.box{
width:400px;
height:500px;
margin:20px auto;
position:relative;
background-color:#fff;
}
.box img{
width:400px;
height:500px;
}
.box span{
width:400px;
height:30px;
top:0;
position:absolute;
line-height:30px;
text-align:center;
color:#fff;
background:#000;
}
.box p{
width:400px;
height:30px;
bottom:0;
margin:0;
position:absolute;
line-height:30px;
text-align:center;
color:#fff;
background:#000;
}
.box ul{
padding:0;
margin:0;
width:40px;
position:absolute;
top:0;
right:-50px;
}
.box li {
list-style:none;
width:40px;
height:40px;
margin-bottom:5px;
background:#666;
}
.box .active { background:#FC3; }

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

标签：

相关文章推荐

新的分享

章节导航