JavaScript幻灯片大图淡出淡现切换特效
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
setinterval()用法 -- setInterval(code,millisec[,"lang"]) 后面就两个参数code是你的js代码，millisec为时间间隔，以毫秒计。
clearInterval()函数是在JavaScript中用于取消setInterval()函数设定的定时执行操作。
html:
<div id="flash"> <!-- 左右2个按钮 --> <div id="prev"></div> <div id="next"></div> <!-- 中间图片 --> <ul id="play"> <!-- li*5>img[src="images/$.jpg" alt=""] --> <li style="display: block;"><img src="images/1.jpg" alt=""></li> <li><img src="images/2.jpg" alt=""></li> <li><img src="images/3.jpg" alt=""></li> <li><img src="images/4.jpg" alt=""></li> <li><img src="images/5.jpg" alt=""></li> </ul> <!-- 下面小点 --> <ul id="button"> <li> <div style="background: #a10000;"></div> </li> <li> <div></div> </li> <li> <div></div> </li> <li> <div></div> </li> <li> <div></div> </li> </ul> </div>
css:
<style>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style-type: none;
}
#flash{
width: 1200px;
height: 535px;
margin: 50px auto;
position: relative;
}
#flash #play{
width: 1200px;
height: 535px;
position: absolute;
top: 0;
left: 0;
}
#flash #play li{
display: none;
position: absolute;
top: 0;
left: 0;
}
#flash #play li img{
float: left;
}
#button{
list-style-type: none;
position: absolute;
left: 470px;
bottom: 20px;
}
#button li{
float: left;
margin-left: 10px;
}
#button li div{
width: 12px;
height: 12px;
background: #ddd;
border-radius: 6px;
cursor: pointer;
}
#prev{
width: 40px;
height: 63px;
background-image: url('./images/beijing.png');
background-position: 0 0;
position: absolute;
left: 10px;
top: 205px;
z-index: 1000;
}
#next{
width: 40px;
height: 63px;
background-image: url('./images/beijing.png');
background-position: -40px 0;
position: absolute;
right: 10px;
top: 205px;
z-index: 1000;
}
#prev:hover{
background-image: url('./images/beijing.png');
background-position: 0 -62px;
}
#next:hover{
background-image: url('./images/beijing.png');
background-position: -40px -62px;
}
</style>javascript:
<script>
window.onload = function(){
// 抓取元素
// 抓取最外层的div#flash
let oFlash = document.getElementById('flash');
// 抓取ul#play
let oPlay = document.getElementById('play');
// 抓取ul#play中的所有的li
let aLi = oPlay.getElementsByTagName('li');
// 抓取ul#button
let oButton = document.getElementById('button');
// 抓取ul#button中所有的div
let aDiv = oButton.getElementsByTagName('div');
// 抓取左右2个按钮
let oPrev = document.getElementById('prev');
let oNext = document.getElementById('next');
// 初始化
let now = 0;
let timer1 = null;
// 对下面小点遍历
for(let i=0;i<aDiv.length;i++){
aDiv[i].index = i;
aDiv[i].onmouseover = function(){
if(now == this.index){
return false;
}
now = this.index;
tab();
}
}
function tab(){
now++;
if(now==5){
now = 0;
}
//遍历包裹图片的li，让所有的li隐藏
for(let i=0; i<aLi.length; i++){
aLi[i].style.display = 'none';
}
// 遍历下面的的小点div，让所有的div背景色都是灰色
for(let i=0; i<aDiv.length; i++){
aDiv[i].style.background = '#ddd';
}
console.log(now)
// 当前的小点div高亮显示
aDiv[now].style.background = '#a10000';
// 当前的li显示
aLi[now].style.display = 'block';
// 当前li透明度设置为0
aLi[now].style.opacity = 0;
aLi[now].style.filter = "alpha(opacity=0)";
// 当前li 调用执行渐变函数
gradual(aLi[now]);
}
function tab1(){
//遍历包裹图片的li，让所有的li隐藏
for(let i=0; i<aLi.length; i++){
aLi[i].style.display = 'none';
}
// 遍历下面的的小点div，让所有的div背景色都是灰色
for(let i=0; i<aDiv.length; i++){
aDiv[i].style.background = '#ddd';
}
console.log(now)
// 当前的小点div高亮显示
aDiv[now].style.background = '#a10000';
// 当前的li显示
aLi[now].style.display = 'block';
// 当前li透明度设置为0
aLi[now].style.opacity = 0;
aLi[now].style.filter = "alpha(opacity=0)";
// 当前li 调用执行渐变函数
gradual(aLi[now]);
}
// 渐变
//设置当前li的渐变效果
function gradual(obj){
var alpha = 0;
clearInterval(timer);
var timer = setInterval(function(){
alpha++;
obj.style.opacity = alpha/100;
obj.style.filter = "alpha(opacity="+alpha+")";
if(alpha == 100){
clearInterval(timer);
}
},10);
}
// 自动播放--设置间隔定时器
timer1 = setInterval(tab,3000);
// 鼠标移入 最外层的div#flash，清除定时器
oFlash.onmouseover = function(){
clearInterval(timer1);
}
// 鼠标移出 最外层的div#flash，清除定时器
oFlash.onmouseout = function(){
timer1 = setInterval(tab,2000);
}
// 点击左侧oPrev按钮
oPrev.onclick = function(){
now--;
console.log(now)
if(now==-1){
// 把索引的最大值赋值给now
now = aDiv.length - 1;
}
// 调用执行tab()函数
tab1();
}
// 点击右侧oNext按钮
oNext.onclick = function(){
now++;
if(now==aDiv.length){
now = 0;
}
// 调用执行tab()函数
tab1();
}
}
</script>
