封装轮播图
2017-09-26 本文已影响0人
hanahaha
分为3个方面
一、HTML
布局原理：
- swipper-container相对定位relative，宽度仅为一张图片的宽度，超出的部分全部hidden
- swipper-container中的元素绝对定位absolute，其中图片列表lists的z-index为1，前进后退按钮和底部选择按钮z-index为2.图片列表lists的内容float平铺
- lists通过left属性的定位来轮播某一张图片
<!DOCTYPE html>
<html>
<head>
<title>Throttle</title>
<link href="./swiper.css" rel="stylesheet" type="text/css">
<style>
*{
margin: 0;
padding: 0;
text-decoration: none;
}
</style>
</head>
<body>
<div id="swipper-container">
<div class="list">
<"img" src="./rotation1.jpg">
<"img" src="./rotation2.jpg">
<"img" src="./rotation3.jpg">
<"img" src="./rotation4.jpg">
<"img" src="./rotation5.jpg">
</div>
<div class="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="javascript:void(0)" class="prev arrow"><</a>
<a href="javascript:void(0)" class="next arrow">></a>
</div>
<script type='text/javascript' src='./swiper.js'></script>
<script type="text/javascript">
new Swiper('swipper-container');
</script>
</body>
</html>
二、CSS
#swipper-container{
position:relative;
width:1500px; /*轮播区域宽度，可以视图片宽度而定*/
height:410px; /*轮播区域高度，可以视图片高度而定*/
overflow:hidden; /*重要！！！表示只能显示width这么宽的宽度，超出的部分隐藏起来*/
}
#swipper-container .list{
position:absolute;
z-index:1;
width:100%;/*在js中会根据图片的数量和宽度重新设定这个宽度*/
height:100%;
}
#swipper-container .list img{
float:left; /*平铺所有的轮播图片*/
}
#swipper-container .buttons{
position:absolute;
left:50%;
bottom:20px;
z-index:2;
height:10px;
width:100px;
}
#swipper-container .buttons span{
float:left;
margin-right:5px;
width:10px;
height:10px;
border:1px solid #fff;
border-radius: 50%;
background-color: #333;
cursor:pointer;
}
#swipper-container .buttons span.on {
background: orangered;
}
#swipper-container .arrow{
position:absolute;
top:40%;
z-index:2;
display:none;
width:40px;
height:40px;
font-size:36px;
font-weight:bold;
line-height: 39px;
text-align: center;
color:#666;
background-color:rgba(0, 0, 0, 0.3);
cursor:pointer;
}
#swipper-container:hover .arrow {
display: block;
}
#swipper-container .arrow:hover {
background-color: rgba(0, 0, 0, .7);
}
#swipper-container .prev {
left: 20px;
}
#swipper-container .next {
right: 20px;
}
三、javascript
封装的JS代码包括：
- Swiper的构造函数，包括各种属性
- Swiper的原型prototype
(function(){
function Swiper(selector){
this.timer=''; //定时器
this.elem = typeof selector == 'Object' ? selector : document.getElementById(selector);//轮播的container
this.offset=parseInt(this.getStyle('width')); //轮播区域的宽度
this.lists = this.elem.getElementsByClassName('list')[0]; //轮播的图片列表
this.listLength=this.lists.children.length; //轮播的图片数量
this.listsLeft=0; //轮播图片的当前偏移量
this.buttons = this.elem.getElementsByClassName('buttons')[0];//轮播图片的对应按钮
this.index=1; //当前播放图片的索引
this.prev = this.elem.getElementsByClassName('prev')[0]; //轮播上一张图
this.next = this.elem.getElementsByClassName('next')[0]; //轮播下一张图
this.init(); //轮播对象的初始化，主要是给按钮添加侦听
}
Swiper.prototype={
constructor:Swiper,
//获取元素某个样式
getStyle:function(property){
return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(this.elem,false)[property] : this.elem.currentStyle[property];
},
init:function(){
var self=this;
self.timer=setInterval(function(){ //初始时自动轮播
self.next.click();
},3000);
this.lists.style.width=this.offset*this.listLength+'px'; //将轮播图片平铺，列表区域宽度设为单个图片宽度*图片数量
this.elem.addEventListener('mouseover',stop,false); //鼠标进入轮播区域暂停播放
this.elem.addEventListener('mouseout',go,false); //鼠标离开轮播区域开始播放
this.prev.addEventListener('click',animation,false); //点击前一个
this.next.addEventListener('click',animation,false); //点击后一个
this.buttons.addEventListener('click',selectButton,false); //点击底部的按钮选择播放哪张图
function go(){
self.timer=setInterval(function(){
self.next.click(); //自动点击下一张
},5000);
}
function stop(){
clearInterval(self.timer);
}
function animation(event){
if(event.target.className.slice(0,4)=="next"){ //如果点击的是下一张
if(self.listsLeft<=-self.offset*(self.listLength-1)){ //当前已经是最后一张
self.index=1;
self.listsLeft = 0;
}
else{
self.index+=1;
self.listsLeft=self.listsLeft-self.offset;
}
}
else if(event.target.className.slice(0,4)=="prev"){ //如果点击的是前一张
if(self.listsLeft>=0){ //当前已经是第一张
self.index=self.listLength;
self.listsLeft = -self.offset*(self.listLength-1);
}
else{
self.index-=1;
self.listsLeft=self.listsLeft+self.offset;
}
}
self.lists.style.left=self.listsLeft+'px';
buttonsShow();
}
function buttonsShow(){ //改变button的‘on’类
for(var i=0;i<self.listLength;i++){
if(self.buttons.children[i].className=='on'){
self.buttons.children[i].className='';
}
}
self.buttons.children[self.index-1].className='on';
}
function selectButton(event){ //按钮选择轮播某张图
self.index=parseInt(event.target.getAttribute('index')); //获取按钮的index属性
self.listsLeft=-self.offset*(self.index-1);
self.lists.style.left=self.listsLeft+'px';
buttonsShow(); //改变button的‘on’类
}
}
}
window.Swiper=Swiper;
})()
