js实现幻灯片轮播原理

最新推荐文章于 2021-07-11 15:26:13 发布

zbtree

最新推荐文章于 2021-07-11 15:26:13 发布

阅读量1.2k

点赞数

分类专栏： javascript

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
var timeID;
var image;
var current= 0;
var images= new Array(5);
function init(){
for(var i=1;i<=5;i++){
images[i]= new Image(450,550);
images[i].src= "pictures/"+i+".jpg";
}
image = document.images[0];
}
function setSrc(i){
current = i;
//设置图片src的属性，实现图片的切换
image.src= images[i].src;
}
function pre(){
if(current<=0){
alert('已经是第一张了');
}else{
current--;
setSrc(current);
}
}
function next(){
if(current>=5){
alert('已经是最后一张了');
}else{
current++;
setSrc(current);
}
}
function play(){
if(current>=5){
current =0;
}
setSrc(++current);
}
</script>
<body onload="init()">
<input type="button"value="第一张"onclick="setSrc(1)">
<input type="button"value="上一张"onclick="pre()">
<input type="button"value="下一张"onclick="next()">
<input type="button"value="最后一张"onclick="setSrc(5)">
<input type="button"value="幻灯播放"onclick="timeID=setInterval('play()',500)">
<input type="button"value="停止播放"onclick="clearInterval(timeID)">
<div style="border:1px solid blue;width:450px; height:550px;"id="myPic">
<imgsrc="pictures/1.jpg"/>
</div>
</body>
</html>
首先init()函数用于初始化images数组和image的值，本例中主要是利用setSrc()设置图片的src属性值，这样就达到了图片的切换，图片的轮播是使用定时器来时显的！setInterval('play()',500)的意思是每0.5s调用一次play()函数！
转载链接http://www.phpddt.com/dhtml/238.html

zbtree

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现幻灯片轮播原理

http-equiv="Content-Type"content="text/html; charset=UTF-8">Insert title here type="text/javascript">var timeID;var image;var current= 0;var images= new Array(5);function
复制链接

扫一扫