<!DOCTYPE html PUBLIC
"
-//W3C//DTD XHTML 1.0 Transitional//EN
"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html xmlns= " http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= " Content-Type " content= " text/html; charset=utf-8 " />
<title>一款CSS+JS淡入式焦点图片幻灯切换效果丨芯晴网页特效丨CsrCode.Cn</title>
<style>
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;}
</style>
<script type= " text/javascript ">
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;
// 切换按钮
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 () {
index++;
index >= aImg.length && (index = 0);
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);
}
};
</script>
</head>
<body>
<div id= " box ">
<ul class= " list ">
<li class= " current "><img src= " /images/m01.jpg " width= " 320 " height= " 240 " /></li>
<li><img src= " /images/m02.jpg " width= " 320 " height= " 240 " /></li>
<li><img src= " /images/m03.jpg " width= " 320 " height= " 240 " /></li>
<li><img src= " /images/m04.jpg " width= " 320 " height= " 240 " /></li>
<li><img src= " /images/m05.jpg " width= " 320 " height= " 240 " /></li>
</ul>
<ul class= " count ">
<li class= " current "> 1</li>
<li> 2</li>
<li> 3</li>
<li> 4</li>
<li> 5</li>
</ul>
</div>
</body>
</html>
<br><br><hr><p align= " center "><font color=skyblue>本特效由 <a href= " http://www.CsrCode.cn " target= " _blank ">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：源码爱好者</font></p>
<html xmlns= " http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv= " Content-Type " content= " text/html; charset=utf-8 " />
<title>一款CSS+JS淡入式焦点图片幻灯切换效果丨芯晴网页特效丨CsrCode.Cn</title>
<style>
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;}
</style>
<script type= " text/javascript ">
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;
// 切换按钮
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 () {
index++;
index >= aImg.length && (index = 0);
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);
}
};
</script>
</head>
<body>
<div id= " box ">
<ul class= " list ">
<li class= " current "><img src= " /images/m01.jpg " width= " 320 " height= " 240 " /></li>
<li><img src= " /images/m02.jpg " width= " 320 " height= " 240 " /></li>
<li><img src= " /images/m03.jpg " width= " 320 " height= " 240 " /></li>
<li><img src= " /images/m04.jpg " width= " 320 " height= " 240 " /></li>
<li><img src= " /images/m05.jpg " width= " 320 " height= " 240 " /></li>
</ul>
<ul class= " count ">
<li class= " current "> 1</li>
<li> 2</li>
<li> 3</li>
<li> 4</li>
<li> 5</li>
</ul>
</div>
</body>
</html>
<br><br><hr><p align= " center "><font color=skyblue>本特效由 <a href= " http://www.CsrCode.cn " target= " _blank ">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：源码爱好者</font></p>
118
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
