渐现轮播图
这是一个原生手撸渐现型的轮播图
- 淡入淡出
- 移入移出
- 添加前后按钮
- *添加小图(动画效果)
一言不合就上代码
js代码块
document.addEventListener('DOMContentLoaded',function(){
let focus = document.querySelector('#focus');
let bigpic = focus.querySelector('#bigpic');
let bigItems = bigpic.children;
let small_wrap = bigpic.nextElementSibling;
let smallpic = document.querySelector('#smallpic');
let bigItems1 = smallpic.children;
let baseWidth = bigItems1[0].offsetWidth;
smallpic.style.width = baseWidth*bigItems1.length + 'px';
let len = bigItems.length;
let index = 0;
let lastIndex = 0;
for(let i=0;i<len;i++){
if(i!==index){
animation(bigItems[i],'opacity',0);
animation(bigItems1[i],'opacity',0.3);
}
}
let timer = setInterval(autoPlay,2000);
let btnPrev = document.createElement('btnPrev');
btnPrev.className = 'prev';
btnPrev.innerHTML = '<';
focus.appendChild(btnPrev);
let btnNext = document.createElement('btnNext');
btnNext.className = 'next';
btnNext.innerHTML = '>';
focus.appendChild(btnNext);
focus.onclick = e=>{
e = e || window.event;
var target = e.target || e.srcElement;
if(target.className.toLowerCase()==='prev'){
index--;
showImg();
}
if(target.className.toLowerCase()==='next'){
index++;
showImg();
}
}
focus.onmouseenter = ()=>{
clearInterval(timer);
}
focus.onmouseleave = ()=>{
timer = setInterval(autoPlay,2000);
}
function autoPlay(){
index++;
showImg();
}
function showImg(){
if(index >= len){
index = 0;
}else if(index < 0){
index = len - 1;
}
animation(bigItems[index],'opacity',1);
animation(bigItems[lastIndex],'opacity',0);
animate(smallpic,{left:-baseWidth*index});
animation(bigItems1[index],'opacity',1);
animation(bigItems1[lastIndex],'opacity',0.3);
lastIndex = index;
}
});
html代码块
<div id="focus">
<ul id="bigpic">
<li><img src="img/001.jpg"></li>
<li><img src="img/002.jpg"></li>
<li><img src="img/003.jpg"></li>
<li><img src="img/001.jpg"></li>
<li><img src="img/002.jpg"></li>
<li><img src="img/003.jpg"></li>
<li><img src="img/001.jpg"></li>
</ul>
<div class="small_wrap">
<ul id="smallpic">
<li><img src="img/001.jpg"></li>
<li><img src="img/002.jpg"></li>
<li><img src="img/003.jpg"></li>
<li><img src="img/001.jpg"></li>
<li><img src="img/002.jpg"></li>
<li><img src="img/003.jpg"></li>
<li><img src="img/001.jpg"></li>
</ul>
</div>
</div>