JavaScript——自动播放幻灯片效果

最新推荐文章于 2022-05-18 20:15:45 发布

梁巴斯

最新推荐文章于 2022-05-18 20:15:45 发布

阅读量2.4k

点赞数

分类专栏： Web前端文章标签： css html javascript

本文链接：https://blog.csdn.net/renrenai35/article/details/25727667

版权

Web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

参考作者Ferris个人网站，经过自己修改。

<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8"/>
<title>自动播放——幻灯片效果</title>
</head>

<style>
*{
margin:0;
padding:0;
}
body{
background:black;
text-align:center;
font:12px/20px Arial;
}
ul{
list-style-type:none;
}
#box{
position:relative;
width:710px;
height:470px;
background:#000;
border-radius:5px;
border:8px solid #000;
margin:10px auto;
margin-top:150px;
}
#box .list{
position:relative;
width:710px;
height:470px;
overflow:hidden;
//border:1px solid #ccc;
}
#box .list li{
position:absolute;
top:0;
left:0;
width:710px;
height:450px;
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:#224b8f;
float:left;
width:20px;
height:20px;
cursor:pointer;
margin-right:8px;
overflow:hidden;
background:#afb4db;
opacity:0.7;
filter:alpha(opacity=70);
border:1px solid #78a355;
border-radius:10px;
font-size:15px;
}
#box .count li.current{
opacity:1;
filter:alpha(opacity=100);
font-weight:700;
background:#afb4db;
}
</style>

<script>
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);
   }

   //自动播放函数
   function autoPlay(){
       play = setInterval(function(){
           index++;
           index >= aImg.length && (index = 0);
           show(index);
       },3000);
   }
   autoPlay();

   //鼠标离开box时自动播放
   oBox.onmouseout = function(){
       autoPlay();
   }

   function show(a){
       if(aNum[a].className != "current"){
           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 +=4;
               alpha>100 && (alpha=100);
               aImg[index].style.opacity=alpha/100;
               aImg[index].style.filter = "alpha(opacity="+alpha+")";
               alpha == 100 && clearInterval(timer);
           },20);
       }
   }
};
</script>

<body>
<div id="box">
   <ul class="list">
       <li class="current" ><img src="images/星空.jpg" width="710" height="470"/></li>
       <li><img src="images/雪.jpg" width="710" height="470"/></li>
       <li><img src="images/草原.jpg" width="710" height="470"/></li>
       <li><img src="images/13.jpg" width="710" height="470"/></li>
       <li><img src="images/黑白.jpg" width="710" height="470"/></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>

梁巴斯

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript——自动播放幻灯片效果

自动播放——幻灯片效果*{margin:0;padding:0;}body{background:black;text-align:center;font:12px/20px Arial;}ul{list-style-type:none;}#box{position:relative;width:710px;height:
复制链接

扫一扫