转:js 自动播放——幻灯片效果(移动端) 淡入淡出效果

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <!-- saved from url=(0039)http://www.fgm.cc/learn/lesson4/02.html -->  
  3. <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>     
  5. <title>自动播放——幻灯片效果</title>  
  6. <style>  
  7. body,div,ul,li{margin:0;padding:0;}  
  8. ul{list-style-type:none;}  
  9. body{background:#000;text-align:center;font:12px/20px Arial;}  
  10. #box{position:relative;width:492px;height:172px;background:#fff;border-radius:5px;border:8px solid #fff;margin:10px auto;}  
  11. #box .list{position:relative;width:490px;height:170px;overflow:hidden;border:1px solid #ccc;}  
  12. #box .list li{position:absolute;top:0;left:0;width:490px;height:170px;opacity:0;filter:alpha(opacity=0);}  
  13. #box .list li img{width: 100%;height: 100%;}  
  14. #box .list li.current{opacity:1;filter:alpha(opacity=100);}  
  15. #box .count{position:absolute;right:0;bottom:5px;}  
  16. #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;}  
  17. #box .count li.current{color:#fff;opacity:1;filter:alpha(opacity=100);font-weight:700;background:#f60;}  
  18. /*所有width改为100%可兼容移动端*/  
  19. </style>  
  20. <script type="text/javascript">  
  21.     window.onload = function (){  
  22.         var oBox = document.getElementById('box');  
  23.         var aUl = oBox.getElementsByTagName('ul');  
  24.         var aImg = aUl[0].getElementsByTagName("li");  
  25.         var aNum = aUl[1].getElementsByTagName("li");  
  26.         var timer = play = null;  
  27.         var i = index = 0;  
  28.     //切换按钮  
  29.     for (i = 0; i < aNum.length; i++){  
  30.         aNum[i].index = i;  
  31.         aNum[i].onmouseover = function(){  
  32.             show(this.index)  
  33.         }  
  34.     }  
  35.     //鼠标划过关闭定时器  
  36.     oBox.onmouseover = function (){  
  37.         clearInterval(play)   
  38.     };    
  39.     //鼠标离开启动自动播放  
  40.     oBox.onmouseout = function ()  
  41.     {  
  42.         autoPlay()  
  43.     };        
  44.     //自动播放函数  
  45.     function autoPlay (){  
  46.     play = setInterval(function (){  
  47.             index++;  
  48.             index >= aImg.length && (index = 0);  
  49.             show(index);          
  50.         },2000);      
  51.     }  
  52.     autoPlay();//应用   
  53.     //图片切换, 淡入淡出效果  
  54.     function show (a){  
  55.         index = a;  
  56.         var alpha = 0;  
  57.         for (i = 0; i < aNum.length; i++){  
  58.             aNum[i].className = "";  
  59.             aNum[index].className = "current";  
  60.             clearInterval(timer);             
  61.         }  
  62.           
  63.         for (i = 0; i < aImg.length; i++){  
  64.             aImg[i].style.opacity = 0;  
  65.             aImg[i].style.filter = "alpha(opacity=0)";    
  66.         }  
  67.           
  68.         timer = setInterval(function(){  
  69.             alpha += 2;  
  70.             alpha > 100 && (alpha =100);  
  71.             aImg[index].style.opacity = alpha / 100;  
  72.             aImg[index].style.filter = "alpha(opacity = " + alpha + ")";  
  73.             alpha == 100 && clearInterval(timer)  
  74.         },20);  
  75.     }  
  76. };  
  77. </script>  
  78. </head>  
  79. <body>  
  80. <div id="box">  
  81.     <ul class="list">  
  82.         <li class="current" style="opacity: 1;"><img src="./img/01.jpg"></li>  
  83.         <li><img src="./img/02.jpg"></li>  
  84.         <li><img src="./img/03.jpg"></li>  
  85.         <li><img src="./img/04.jpg"></li>  
  86.         <li><img src="./img/05.jpg"></li>  
  87.     </ul>  
  88.     <ul class="count">  
  89.         <li class="current">1</li>  
  90.         <li>2</li>  
  91.         <li>3</li>  
  92.         <li>4</li>  
  93.         <li>5</li>  
  94.     </ul>  
  95. </div>  
  96. </body>  
  97. </html>  
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值