您的位置：首页 > Web前端 > JavaScript

js自动播放效果的实现

2016-09-04 23:05 531 查看

话不不多少多说，先上效果图

先上css代码

<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:492px;height:172px;background:#fff;border-radius:5px;border:8px solid #fff;margin:10px
auto;}#box .list{position:relative;width:490px;height:170px;overflow:hidden;border:1px solid #ccc;}#box .list li{position:absolute;top:0;left:0;width:490px;height:170px;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>

js及其他代码

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="img/1.jpg" width="490" height="170"/></li>

<li><img src="img/2.jpg" width="490" height="170"/></li>

<li><img src="img/3.jpg" width="490" height="170"/></li>

<li><img src="img/4.jpg" width="490" height="170"/></li>

<li><img src="img/5.jpg" width="490" height="170"/></li>

</ul>

<ul class="count">

<li class="current">1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

</ul>

</div>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js 幻灯片

相关文章推荐

新的分享

章节导航