随笔 - 11  文章 - 2  评论 - 1

图片轮播特效 

  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>自动播放——幻灯片缓冲效果</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;cursor:pointer;}
 11 #box .list{position:relative;width:490px;height:170px;overflow:hidden;}
 12 #box .list ul{position:absolute;top:0;left:0;}
 13 #box .list li{width:490px;height:170px;overflow:hidden;}
 14 #box .count{position:absolute;right:0;bottom:5px;}
 15 #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;}
 16 #box .count li.current{color:#fff;opacity:1;filter:alpha(opacity=100);font-weight:700;background:#f60;}
 17 #tmp{width:100px;height:100px;background:red;position:absolute;}
 18 </style>
 19 <script type="text/javascript">
 20 window.onload = function ()
 21 {
 22     var oBox = document.getElementById("box");
 23     var oList = oBox.getElementsByTagName("ul")[0];
 24     var aImg = oBox.getElementsByTagName("img");
 25     var timer = playTimer = null;
 26     var index = i = 0;
 27     var bOrder = true;
 28     var aTmp = [];
 29     var aBtn = null;
 30     
 31     //生成数字按钮
 32     for (i = 0; i < aImg.length; i++) aTmp.push("<li>" + (i + 1) + "</li>");
 33     
 34     //插入元素
 35     var oCount = document.createElement("ul");
 36     oCount.className = "count";
 37     oCount.innerHTML = aTmp.join("");
 38     oBox.appendChild(oCount);    
 39     aBtn = oBox.getElementsByTagName("ul")[1].getElementsByTagName("li");
 40     
 41     //初始化状态
 42     cutover();
 43     
 44     //按钮点击切换
 45     for (i = 0; i < aBtn.length; i++)
 46     {
 47         aBtn[i].index = i;
 48         aBtn[i].onmouseover = function ()
 49         {
 50             index = this.index;
 51             cutover()
 52         }
 53     }
 54     
 55     function cutover()
 56     {
 57         for (i = 0; i < aBtn.length; i++) aBtn[i].className = "";
 58         aBtn[index].className = "current";            
 59         startMove(-(index * aImg[0].offsetHeight))
 60     }
 61     
 62     function next()
 63     {
 64         bOrder ? index++ : index--;
 65         index <= 0 && (index = 0, bOrder = true);
 66         index >= aBtn.length - 1 && (index = aBtn.length - 1, bOrder = false)
 67         cutover()
 68     }
 69     
 70     playTimer = setInterval(next, 3000);
 71     
 72     //鼠标移入展示区停止自动播放
 73     oBox.onmouseover = function ()
 74     {
 75         clearInterval(playTimer)
 76     };
 77     
 78     //鼠标离开展示区开始自动播放
 79     oBox.onmouseout = function ()
 80     {
 81         playTimer = setInterval(next, 3000)
 82     };
 83     function startMove(iTarget)
 84     {
 85         clearInterval(timer);
 86         timer = setInterval(function ()
 87         {
 88             doMove(iTarget)
 89         }, 30)    
 90     }
 91     function doMove (iTarget)
 92     {        
 93         var iSpeed = (iTarget - oList.offsetTop) / 10;
 94         iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);        
 95         oList.offsetTop == iTarget ? clearInterval(timer) : oList.style.top = oList.offsetTop + iSpeed + "px"
 96     }
 97 };
 98 </script>
 99 </head>
100 <body>
101 <div id="box">
102     <div class="list">
103         <ul>
104             <li><img src="img/01.jpg" width="490" height="170" /></li>
105             <li><img src="img/02.jpg" width="490" height="170" /></li>
106             <li><img src="img/03.jpg" width="490" height="170" /></li>
107             <li><img src="img/04.jpg" width="490" height="170" /></li>
108             <li><img src="img/05.jpg" width="490" height="170" /></li>
109         </ul>
110     </div>
111 </div>
112 </body>
113 </html>
View Code

 

posted @ 2016-04-05 00:36  Double405  阅读(134)  评论(0)    收藏  举报