第一种,比较高大上哈哈哈哈哈,用起来比较方便,API封装的思想很值得学习
step1:结构设计
html页面中将图片包含在一组列表中,代码如下:
<div id="list" class="list">
<ul>
<li class="list-item-one"><img src="image/image1.jpg"></li>
<li class="list-item"><img src="image/image2.jpg"></li>
<li class="list-item"><img src="image/image3.jpg"></li>
<li class="list-item"><img src="image/image4.jpg"></li>
<li class="list-item"><img src="image/image5.jpg"></li>
</ul>
</div>
step2:设置样式,所有图片层叠在一起,通过对图片透明度的改变来实现轮播图的显示,并且切换的时候有过渡哦^_^
*{
margin:0;
padding:0;
}
.list{
height:590px;
position:relative;
overflow: hidden;
}
.list ul{
list-style-type:none;
position:relative;
width:100%;
height:100%;
margin:0;
padding:0;
}
.list-item,
.list-item-one{
position:absolute; //因为图片是重叠在一起的,所以用absolute
opacity: 0;
transition:opacity 1s;
}
.list-item-one{ //图片正常显示时的样式
transition:opacity 1s;
opacity:1;
}
step3:API设计,用面向对象的方式将其封装为一个组件对象,方便使用
class Slider{
constructor(id){
this.container=document.getElementById(id);
this.items=this.container.querySelectorAll('.list-item,.list-item-one');
}
getSelectorItem(){ //获得当前展示的图片
let selected=this.container.querySelector('.list-item-one');
return selected;
}
getSelectorItemIndex(){ //当前选中的图片的位置
return Array.from(this.items).indexOf(this.getSelectorItem());
}
slideTo(idx){ //跳转到idx这一张图片
let selected=this.getSelectorItem();
if(selected){
selected.className="list-item";
}
let item=this.items[idx];
if(item){
item.className="list-item-one";
}
}
slideNext(){ //下一张
let currentIdx=this.getSelectorItemIndex();
let nextIdx=(currentIdx+1)%this.items.length;
this.slideTo(nextIdx);
}
slidePrevious(){ //上一张
let currentIdx=this.getSelectorItemIndex();
let previousIdx=(this.item.length+currentIdx-1)%this.items.length;
this.slideTo(previousIdx);
}
}
let slider=new Slider('list');
setInterval(slider.slideNext.bind(slider),3000);
第二种,简单易懂,没有什么特别的技巧(html和css文件和第一种相同)
window.onload=function(){
var pic=document.getElementById('list');
var list=pic.querySelectorAll('.list-item,.list-item-one');
var timer=null;
var index=0;
function autochange(){ //自动切换图片
if(++index>=list.length)
index=0;
changepic(index);
}
function changepic(idx){ //改变图片样式来显示
for(var i=0;i<list.length;i++){
list[i].className="list-item";
}
list[idx].className="list-item-one";
}
timer=setInterval(autochange,3000); //定时器,3s切换一次
pic.onmouseover=function(){ //鼠标放上去的时候不发生切换
clearInterval(timer);
}
pic.onmouseout=function(){ //鼠标离开时切换继续
timer=setInterval(autochange,3000);
}
}