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

#学习笔记#(38)js轮播图

2016-02-10 22:10 811 查看

单张显示，第一张向前切换到最后一张，最后一张向后切换到第一张，可随意增加图片数量

html代码如下

<!DOCTYPE html>
<html>
<head>
<title>轮播图</title>
<meta charset="UTF-8" />
<link href="carousel.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<a class="pre" id="pre" onclick="gotopre()"></a>
<div class="box" id="box">
<img src="carouselimgs/1.jpg" class="boximg" />
<img src="carouselimgs/2.jpg" class="boximg" />
<img src="carouselimgs/3.jpg" class="boximg" />
<img src="carouselimgs/4.jpg" class="boximg" />
<img src="carouselimgs/5.jpg" class="boximg" />
<img src="carouselimgs/6.jpg" class="boximg" />
<img src="carouselimgs/7.jpg" class="boximg" />
<img src="carouselimgs/5.jpg" class="boximg" />
<img src="carouselimgs/6.jpg" class="boximg" />
<img src="carouselimgs/7.jpg" class="boximg" />
</div>
<a class="next" id="next" onclick="gotonext()"></a>
</div>
<body>
<script src="carousel.js"></script>
</html>

js代码

document.getElementById("box").children[0].className="show";
var prebtn=document.getElementById("pre");
var nextbtn=document.getElementById("next");

function gotopre(){
var oBoxs=document.getElementById("box").children;
if(oBoxs[0].className=="show"){//如果是第一张图片要往回切，切到最后一张吧
oBoxs[0].className="boximg";
oBoxs[oBoxs.length-1].className="show";
}else{
for(var i=1;i<oBoxs.length;i++){
if(oBoxs[i].className=="show"){	//获取显示的图片序号i
oBoxs[i-1].className="show";//显示前一张
oBoxs[i].className="boximg"; //将第i张隐藏
}
}
}
}

function gotonext(){
var oBoxs=document.getElementById("box").children;
if(oBoxs[oBoxs.length-1].className=="show"){//如果是第一张图片要往回切，切到最后一张吧
oBoxs[oBoxs.length-1].className="boximg";
oBoxs[0].className="show";
}else{
for(var i=oBoxs.length-2;i>=0;i--){
if(oBoxs[i].className=="show"){	//获取显示的图片序号i
oBoxs[i+1].className="show";//显示后一张
oBoxs[i].className="boximg"; //将第i张隐藏
}
}
}
}

css代码

.container{
width:320px;
height:150px;
margin:100px auto;
}
.box{
width:220px;
height:150px;
overflow:hidden;
float:left;
border:1px solid #ccc;
}
.boximg{
width:220px;
height:150px;
float:left;
display:none;
}
.pre{
width:20px;
height:150px;
background-image:url("carouselimgs/pre.jpg");
background-repeat:no-repeat;
display:block;
float:left;
cursor:pointer;
margin-right:15px;
}
.next{
width:20px;
height:150px;
background-image:url("carouselimgs/next.jpg");
background-repeat:no-repeat;
display:block;
float:left;
cursor:pointer;
margin-left:15px;
}
@keyframes show{
0%{
display:block;
opacity:0.1;
}
50%{
display:block;
opacity:0.5;
}
100%{
display:block;
opacity:1;
}
}
.show{
width:220px;
height:150px;
float:left;
animation:show 1s;
display:block;
}

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

标签：

相关文章推荐

新的分享

章节导航