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

原生javascript图片轮播实现

2017-08-04 21:55 423 查看

初学javascript，尝试着制作动画-图片轮播。（实现方法挺多）

思路：

添加多张图片，依次让图片显示。

依次显示需要每隔一段时间去更新，因此选择了setInterval()来定时更新。

更新时需要将当前的图片隐藏，添加变量进行记录即可。

这里隐藏图片选择了display，便于做成插件。

简单使用：

效果图
html代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{
margin:0;
padding:0;
}
#imgbox{
position: absolute;
overflow: hidden;
z-index: -10;
}
#imgbox ul{
display: table-cell;
width: 100%;
text-align: center;
position: absolute;
bottom: 10px;
list-style-type: none;
}
#imgbox ul li{
display: inline-block;
width: 10px;
height: 10px;
margin: 0 10px;
background-color: #ffffff;
border-radius: 6px;
}
#imgbox ul li:hover{
border: 1px solid #595959;
}
#imgbox img{
display: none;
width: 100%;
}
#imgbox #prev,#imgbox #next{
position: absolute;
top: 0;;bottom: 0;
width: 50px;
height: 50px;
margin: auto;
background-color: rgba(233, 233, 233, 0.7);
border-radius: 51px;
z-index: 20;
}
#imgbox:hover #prev,#imgbox:hover #next{
background-color: rgba(233, 233, 233, 0.85);
}
#imgbox #prev{
left: 0
}
#imgbox #next{
right: 0;
}
#imgbox #prev:before,#imgbox #next:before{
position: absolute;
top:-9px;
font-size: 60px;
color: rgba(0, 0, 0, 0.16);
line-height: 60px;
}
#imgbox:hover #prev:before,#imgbox:hover #next:before{
color: rgba(0, 0, 0, 0.5);
}
#imgbox #prev:before{
content: "<";
left: -1px;
}
#imgbox #next:before{
content: ">";
right: -1px;
}

</style>
<script src="轮播图.js"></script>
<body>
<div id="imgbox">
<div id="prev"></div>
<img src="img/01.jpg" alt=""/>
<img src="img/02.jpg" alt=""/>
<img src="img/03.jpg" alt=""/>
<img src="img/04.jpg" alt=""/>
<img src="img/05.jpg" alt=""/>
<img src="img/06.jpg" alt=""/>
<img src="img/07.jpg" alt=""/>
<img src="img/08.jpg" alt=""/>
<div id="next"></div>
</div>
<script >init("imgbox","prev","next",1500);</script>
</body>
</html>

javascript代码：git@code.csdn.net:snippets/2518355.git

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

标签： javascript 插件

相关文章推荐

新的分享

章节导航