Code666 (代码贴、代码片段)

[JavaScript] js 自动播放幻灯片 →→→→→进入此内容的聊天室

来自 , 2020-12-10, 写在 JavaScript, 查看 134 次.
URL http://www.code666.cn/view/1679091c
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>js 自动播放幻灯片</title>
  6. <style>
  7. body, div, ul, li {
  8.         margin: 0;
  9.         padding: 0;
  10. }
  11. ul {
  12.         list-style-type: none;
  13. }
  14. body {
  15.         text-align: center;
  16.         font: 12px/20px Arial;
  17. }
  18. #box {
  19.         position: relative;
  20.         width: 492px;
  21.         height: 172px;
  22.         background: #fff;
  23.         border-radius: 5px;
  24.         border: 8px solid #CCC;
  25.         margin: 10px auto;
  26.         cursor: pointer;
  27. }
  28. #box .list {
  29.         position: relative;
  30.         width: 490px;
  31.         height: 170px;
  32.         overflow: hidden;
  33. }
  34. #box .list ul {
  35.         position: absolute;
  36.         top: 0;
  37.         left: 0;
  38. }
  39. #box .list li {
  40.         width: 490px;
  41.         height: 170px;
  42.         overflow: hidden;
  43. }
  44. #box .count {
  45.         position: absolute;
  46.         right: 0;
  47.         bottom: 5px;
  48. }
  49. #box .count li {
  50.         color: #fff;
  51.         float: left;
  52.         width: 20px;
  53.         height: 20px;
  54.         cursor: pointer;
  55.         margin-right: 5px;
  56.         overflow: hidden;
  57.         opacity: 0.7;
  58.         filter: alpha(opacity = 70);
  59.         border-radius: 20px;
  60.         background-color: #CCC;
  61. }
  62. #box .count li.current {
  63.         color: #fff;
  64.         opacity: 1;
  65.         filter: alpha(opacity = 100);
  66.         font-weight: 700;
  67.         background-color: #666;
  68. }
  69. #tmp {
  70.         width: 100px;
  71.         height: 100px;
  72.         position: absolute;
  73. }
  74. </style>
  75. <script type="text/javascript">
  76. window.onload = function ()
  77. {
  78.         var oBox = document.getElementById("box");
  79.         var oList = oBox.getElementsByTagName("ul")[0];
  80.         var aImg = oBox.getElementsByTagName("img");
  81.         var timer = playTimer = null;
  82.         var index = i = 0;
  83.         var bOrder = true;
  84.         var aTmp = [];
  85.         var aBtn = null;
  86.        
  87.         //生成数字按钮
  88.         for (i = 0; i < aImg.length; i++) aTmp.push("<li>" + (i + 1) + "</li>");
  89.        
  90.         //插入元素
  91.         var oCount = document.createElement("ul");
  92.         oCount.className = "count";
  93.         oCount.innerHTML = aTmp.join("");
  94.         oBox.appendChild(oCount);      
  95.         aBtn = oBox.getElementsByTagName("ul")[1].getElementsByTagName("li");
  96.        
  97.         //初始化状态
  98.         cutover();
  99.        
  100.         //按钮点击切换
  101.         for (i = 0; i < aBtn.length; i++)
  102.         {
  103.                 aBtn[i].index = i;
  104.                 aBtn[i].onmouseover = function ()
  105.                 {
  106.                         index = this.index;
  107.                         cutover()
  108.                 }
  109.         }
  110.        
  111.         function cutover()
  112.         {
  113.                 for (i = 0; i < aBtn.length; i++) aBtn[i].className = "";
  114.                 aBtn[index].className = "current";                     
  115.                 startMove(-(index * aImg[0].offsetHeight))
  116.         }
  117.        
  118.         function next()
  119.         {
  120.                 bOrder ? index++ : index--;
  121.                 index <= 0 && (index = 0, bOrder = true);
  122.                 index >= aBtn.length - 1 && (index = aBtn.length - 1, bOrder = false)
  123.                 cutover()
  124.         }
  125.        
  126.         playTimer = setInterval(next, 3000);
  127.        
  128.         //鼠标移入展示区停止自动播放
  129.         oBox.onmouseover = function ()
  130.         {
  131.                 clearInterval(playTimer)
  132.         };
  133.        
  134.         //鼠标离开展示区开始自动播放
  135.         oBox.onmouseout = function ()
  136.         {
  137.                 playTimer = setInterval(next, 3000)
  138.         };
  139.         function startMove(iTarget)
  140.         {
  141.                 clearInterval(timer);
  142.                 timer = setInterval(function ()
  143.                 {
  144.                         doMove(iTarget)
  145.                 }, 30) 
  146.         }
  147.         function doMove (iTarget)
  148.         {              
  149.                 var iSpeed = (iTarget - oList.offsetTop) / 10;
  150.                 iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);          
  151.                 oList.offsetTop == iTarget ? clearInterval(timer) : oList.style.top = oList.offsetTop + iSpeed + "px"
  152.         }
  153. };
  154. </script>
  155. </head>
  156. <body>
  157. <div id="box">
  158.   <div class="list">
  159.     <ul>
  160.       <li><img src="http://yuncode.net/Public/images/header/logo.gif" width="490" height="170" /></li>
  161.       <li><img src="http://yuncode.net/Public/images/header/logo.gif" width="490" height="170" /></li>
  162.       <li><img src="http://yuncode.net/Public/images/header/logo.gif" width="490" height="170" /></li>
  163.       <li><img src="http://yuncode.net/Public/images/header/logo.gif" width="490" height="170" /></li>
  164.       <li><img src="http://yuncode.net/Public/images/header/logo.gif" width="490" height="170" /></li>
  165.     </ul>
  166.   </div>
  167. </div>
  168. </body>
  169. </html>
  170.  

回复 "js 自动播放幻灯片"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666