轮播图
2016-10-05 本文已影响37人
进击的前端
做了一个简易版的轮播图，html结构拿了网上的一个人的例子，然后重新写css和js部分。
大概实现的功能如下
- 能够实现图片按照时间轮流播放
- 自动生成页脚的数字标示，并且鼠标点击就可以生成新的轮播图
- 只要更改.banner_list里面的链接数量，就能生成新的轮播图
对原来的代码的改进之处，话说原来的代码的几个槽点
- 无一例外用id，id的使用这样样式不能重现，最外侧用id做标示，内部用class复用率高
- 用setTimeout来做动画，透明度其实用transition就好了
还可以的改进之处
- 图片懒加载
- 做成组件
代码清单，有机会做成组件吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#banner{
height: 286px;
width:478px;
overflow:hidden;
position: relative;
}
.banner_list .active{
z-index: 1;!important;
opacity: 1;
}
.banner_list a{
position: absolute;
top:0;
z-index: 0;
opacity: 0;
transition: opacity 1s;
}
.list{
position: absolute;
z-index: 99;
display: flex;
list-style-type: none;
justify-content: space-between;
bottom: 10px;
right: 20px;
}
.list li {
width: 15px;
height: 15px;
background-color: beige;
border-radius: 50%;
padding-left: 6px;
padding-bottom: 6px;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="banner">
<div class="banner_bg"></div> <!--标题背景-->
<a href="#" class="banner_info"></a> <!--标题-->
<ul class="list"></ul>
<div class="banner_list">
<a href="#" target="_blank"><img src="imgs/p1.jpg" title="橡树小屋的blog1" alt="橡树小屋的blog" /></a>
<a href="#" target="_blank"><img src="imgs/p5.jpg" title="橡树小屋的blog2" alt="橡树小屋的blog" /></a>
<a href="#" target="_blank"><img src="imgs/p3.jpg" title="橡树小屋的blog3" alt="橡树小屋的blog" /></a>
<a href="#" target="_blank"><img src="imgs/p4.jpg" title="橡树小屋的blog4" alt="橡树小屋的blog" /></a>
</div>
</div>
<script>
var sliceBox = (function(){
var list_dom = null; //链接的container
var container = null; //轮播图的主题
var list = null; //这个dom标示图片的按钮
var img_list = [];
var c_list = [];
var cur_num = 0;
var pic_num = 0;
var timer = null;
var duration = 1000;
function changePic(){
img_list[cur_num].classList.remove("active");
cur_num = (cur_num+1)%pic_num;
img_list[cur_num].classList.add("active");
timer = setTimeout(changePic,duration);
}
function init(selector,duration_time){
duration = duration_time;
container = document.querySelector(selector);
list_dom = container.querySelector(selector+" .banner_list");
pic_num = list_dom.childElementCount;
img_list = Array.prototype.slice.call(list_dom.children);
img_list[0].classList.add("active");
timer = setTimeout(changePic,duration);
addButton(selector);
}
function addButton(selector){
list = document.querySelector(selector+" .list");
for(var i=0;i<pic_num;i++){
var li = document.createElement("li");
c_list.push(li);
li.textContent = i+1;
li.onclick = function(e){
clearTimeout(timer);
img_list[cur_num].classList.remove("active");
cur_num = parseInt(e.target.textContent)-1;
img_list[cur_num].classList.add("active");
timer = setTimeout(changePic,duration);
};
list.appendChild(li);
}
}
return {
init:init
}
})();
sliceBox.init("#banner",2000);
</script>
</body>
</html>
