如何用javascript实现图片轮播效果
先上实现的效果图:
其中包括三种轮播效果,(有序,无序,上一页下一页)
以下是我的实现代码,大家有更好的实现方式,可以给我留言,让我学习下。
// An highlighted block
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#header{
width:500px;
height:313px;
background-color:#FF9;
margin:10px auto;
border:solid 5px red;
}
.logoHidden{
display:none;
}
.logoShow{
display:block;
}
.sort{
width:210px;
height:24px;
position:relative;
top:-70px;
left:20px;
z-index:2;
}
.num{
width:40px;
height:20px;
float:left;
background-color:orange;
opacity:0.5;
margin-left:10px;
margin-top:2px;
text-align:center;
color:white;
border:solid 1px #FF6;
}
#s01{
width:210px;
height:24px;
position:relative;
top:-65px;
left:137px;
}
.btn{
width:40px;
height:6px;
background-color:#999;
float:left;
margin-left: 10px;
border-radius: 5px;
opacity:0.5;
}
.clickbtn{
width:50px;
height:313px;
background-color:#999;
opacity:0.3;
font-size:76px;
color:white;
line-height:313px;
}
.clickbtn a{
text-decoration:none;
color:white;
}
#left{
position:relative;
top:-361px;
}
#right{
position:relative;
top:-676px;
left:452px;
}
</style>
</head>
<body onLoad="play()">
<div id="header">
<img id="img0" src="img/a.jpg" width="500" height="313" class="logoShow" />
<img id="img1" src="img/b.jpg" width="500" height="313" class="logoHidden" />
<img id="img2" src="img/c.jpg" width="500" height="313" class="logoHidden" />
<img id="img3" src="img/d.jpg" width="500" height="313" class="logoHidden" />
<div class="sort" id="s00">
<div class="num" id="s1" onMouseOver="play(0)" onMouseOut="restartInterval()">1</div>
<div class="num" id="s2" onMouseOver="play(1)" onMouseOut="restartInterval()">2</div>
<div class="num" id="s3" onMouseOver="play(2)" onMouseOut="restartInterval()">3</div>
<div class="num" id="s4" onMouseOver="play(3)" onMouseOut="restartInterval()">4</div>
</div>
<div id="s01">
<div class="btn" id="s1" onMouseOver="play(0)" onMouseOut="restartInterval()"></div>
<div class="btn" id="s2" onMouseOver="play(1)" onMouseOut="restartInterval()"></div>
<div class="btn" id="s3" onMouseOver="play(2)" onMouseOut="restartInterval()"></div>
<div class="btn" id="s4" onMouseOver="play(3)" onMouseOut="restartInterval()"></div>
</div>
<div id="left" class="clickbtn"><a href="javascript:preOrnext(0)"><</a></div>
<div id="right" class="clickbtn"><a href="javascript:preOrnext(1)">></a></div>
</div>
</body>
<script type="text/javascript">
//定义序号
var i = 0;
//获取图片数组
var imgs = document.getElementsByTagName("img");
//获取数字数组
var nums = document.getElementsByClassName("num");
//获取按钮数组
var btns = document.getElementsByClassName("btn");
//获取setInterval的返回值
var intervalId = null;
//图片轮播功能实现
function play(num){
//如何num不是未定义,即传入了num。指定显示第num张图片.
if(typeof(num)!="undefined"){
i = num;
clearInterval(intervalId);//停止计时器
}
//如果已经播放到最后一张图片,则序号i归零。即再从第一张图片开始播放。
if(i==imgs.length){
i = 0;
}
//显示第i张图片,隐藏其他图片。同时,修改第i个数字/按钮的背景为橙色,其他为灰色。
for(j=0;j<imgs.length;j++){
if(i==j){
imgs[j].className = "logoShow";
nums[j].style.backgroundColor = "orange";
btns[j].style.backgroundColor = "orange";
}else{
imgs[j].className = "logoHidden";
nums[j].style.backgroundColor = "gray";
btns[j].style.backgroundColor = "gray";
}
}
/*
以下是把所有的图片隐藏,所有的数字背景改为灰色,所有的按钮背景改为灰色。
var j=0;
while(j<imgs.length){
imgs[j].className = "logoHidden";
nums[j].style.backgroundColor = "gray";
btns[j].style.backgroundColor = "gray";
j++;
}
*/
/*
让第i张图片显示,第i个数字改变背景色,第i个按钮改变背景色。
var k=0;
while(k<imgs.length){
if(i==k){
imgs[k].className = "logoShow";
nums[k].style.backgroundColor = "orange";
btns[k].style.backgroundColor = "orange";
}
k++;
}
*/
i++;
}
intervalId = setInterval("play()",1000);
//重置计时器
function restartInterval(){
intervalId = setInterval("play()",1000);
}
function preOrnext(flag){
clearInterval(intervalId);//停止计时器
if(flag==0){
i--;
i--;//因为调用的play方法中,i++了,所以这里两次--。也可以把play中的i++注释掉,这里只用一个i--即可。
alert(i);
if(i==-1){
i=3;
}
}else{
i++;
if(i==4){
i=0;
}
}
play(i);
}
</script>
</html>