本文实例讲述了JS实现可切换图片的幻灯切换效果。分享给大家供大家参考，具体如下：

JS切换图片幻灯切换效果

body, div, ul, li { margin: 0; padding: 0; }

ul { list-style-type: none; }

body { background: #000; text-align: center; font: 12px/20px Arial; }

#box { position: relative; width: 322px; height: 172px; background: #fff; border-radius: 5px; border: 8px solid #fff; margin: 10px auto; }

#box .list { position: relative; width: 320px; height: 240px; overflow: hidden; border: 1px solid #ccc; }

#box .list li { position: absolute; top: 0; left: 0; width: 320px; height: 240px; opacity: 0; filter: alpha(opacity=0); }

#box .list li.current { opacity: 1; filter: alpha(opacity=100); }

#box .count { position: absolute; right: 0; bottom: 5px; }

#box .count li { color: #fff; float: left; width: 20px; height: 20px; cursor: pointer; margin-right: 5px; overflow: hidden; background: #F90; opacity: 0.7; filter: alpha(opacity=70); border-radius: 20px; }

#box .count li.current { color: #fff; opacity: 1; filter: alpha(opacity=100); font-weight: 700; background: #f60; }

#tmp { width: 100px; height: 100px; background: red; position: absolute; }

window.onload = function() {

var oBox = document.getElementById("box");

var aUl = document.getElementsByTagName("ul");

var aImg = aUl[0].getElementsByTagName("li");

var aNum = aUl[1].getElementsByTagName("li");

var timer = play = null;

var i = index = 0;

var bOrder = true;

//切换按钮

for(i = 0; i < aNum.length; i++) {

aNum[i].index = i;

aNum[i].onmouseover = function() {

show(this.index)

}

}

//鼠标划过关闭定时器

oBox.onmouseover = function() {

clearInterval(play)

};

//鼠标离开启动自动播放

oBox.onmouseout = function() {

autoPlay()

};

//自动播放函数

function autoPlay() {

play = setInterval(function() {

//判断播放顺序

bOrder ? index++ : index--;

//正序

index >= aImg.length && (index = aImg.length - 2, bOrder = false);

//倒序

index <= 0 && (index = 0, bOrder = true);

//调用函数

show(index)

}, 2000);

}

autoPlay();//应用

function show(a) {

index = a;

var alpha = 0;

for(i = 0; i < aNum.length; i++)aNum[i].className = "";

aNum[index].className = "current";

clearInterval(timer);

for(i = 0; i < aImg.length; i++) {

aImg[i].style.opacity = 0;

aImg[i].style.filter = "alpha(opacity=0)";

}

timer = setInterval(function() {

alpha += 2;

alpha > 100 && (alpha = 100);

aImg[index].style.opacity = alpha / 100;

aImg[index].style.filter = "alpha(opacity = " + alpha + ")";

alpha == 100 && clearInterval(timer)

}, 20);

}

};

希望本文所述对大家JavaScript程序设计有所帮助。