首页 > 代码库 > JS 仿淘宝幻灯片 非完整版 小案例

JS 仿淘宝幻灯片 非完整版 小案例

仿淘宝幻灯片,基础版,后期效果是要做到每次点击小圆点,切换都无缝

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"  2 "http://www.w3.org/TR/html4/strict.dtd">  3   4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">  5     <head>  6         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  7         <title>4.淘宝幻灯片</title>  8         <meta name="author" content="Administrator" />  9         <!-- Date: 2014-12-11 --> 10         <style> 11             *{margin:0;padding:0} 12             #div1{width:400px;height:215px;  border:1px solid red;margin:40px auto; overflow:hidden;position:relative } 13             ul{position:absolute;left:0;top:0} 14             li{list-style:none;float:left; position: relative} 15             li.active{background:red} 16             li.active2{border:1px solid red} 17             li img{width:400px;} 18             ol{position:absolute} 19             ol li{width:15px;height:15px;border-radius:10px;background:#808080;margin:0 3px} 20             .t{position:absolute;font-size:80px;z-index:2;left:200px;top:100px;color:red;width:100px;height:100px;background:#fff;text-align:center; border:1px solid black} 21         </style> 22         <script> 23             window.onload=function(){ 24                  var oDiv1=document.getElementById(div1); 25                  var oUl=oDiv1.getElementsByTagName(ul)[0]; 26                  var aLi=oUl.getElementsByTagName(li); 27                  var arr=[3-images/1.jpg,3-images/2.jpg,3-images/3.jpg,3-images/4.jpg,3-images/5.jpg]; 28                  var arr1=[1,2,3,4,5]; 29                  oUl.style.width = aLi.length * aLi[0].offsetWidth +px; 30                   31                  var oL=document.createElement(ol); 32                  var str=‘‘; 33                  for( var i=0;i<aLi.length;i++ ){ 34                       35                      str += <li></li>  36                  } 37                  oL.innerHTML=str; 38                  oDiv1.appendChild( oL ); 39                  document.title = oDiv1.offsetWidth +-+oL.offsetWidth; 40                  oL.style.left = (oDiv1.offsetWidth - oL.offsetWidth)/2 +‘px‘; 41                  oL.style.bottom=0px; 42                  var aLi1=oL.getElementsByTagName(li); 43                   44                  var timer=null; 45                  var num=0; 46                   47                  function init(){ 48                      for(var i=0;i<aLi1.length;i++){ 49                          aLi1[i].className=‘‘ 50                      } 51                      aLi1[num].className=active 52                  } 53                  init(); 54                  function slide(){ 55                      num++; 56                      if(num>=aLi.length) { 57                            num=0; 58                            oUl.style.left = 0; 59                      } 60                      init(); 61                      hcMove(oUl,{ 62                          left:-400*num 63                      }) 64                  } 65                  timer=setInterval(function(){ 66                      slide() 67                  },1000) 68                   69                   oDiv1.onmouseover=function(){ 70                          clearInterval(timer) 71                      } 72                  oDiv1.onmouseout=function(){ 73                      timer=setInterval(function(){ 74                          slide() 75                      },1000) 76                  } 77                 for(var i=0;i<aLi.length;i++){ 78                     aLi1[i].index=i; 79                     aLi1[i].onclick=function(){ 80                          num = this.index; 81                          init(); 82                          hcMove(oUl,{left:-400*num}) 83                     } 84                 } 85                   86                   87                   88             } 89             function css(obj,attr) { 90                 return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr] 91             } 92             /**完美 缓冲运动 带opacity**/ 93 function hcMove(obj,json,fn){ 94                 clearInterval( obj.timer ); 95                   96                 obj.timer=setInterval(function(){ 97                     var iBtn=true;   98                      99                     for(var attr in json){100                         var target=json[attr];101                         102                         if( attr == opacity ){103                             var iSpeed = (target-Math.round(css(obj,attr))*100)/6;104                         }else{105                             var iSpeed = (target-parseInt(css(obj,attr)))/6;106                         }107                         108                          109                          iSpeed = iSpeed > 0 ? Math.ceil(iSpeed)  : Math.floor(iSpeed);//速度取整,因为js中的小数是经过计算的,默认四舍五入,但是不够0.5的就不会动了110                          111                          if( parseInt(css(obj,attr)) != target ){112                               iBtn=false;//如果有运动没到达目标点,iBtn为false113                               114                               if( attr == opacity ){115                                   var sNow=Math.round(css(obj,attr)*100) + iSpeed;116                                   117                                   //先做处理 再赋值118                                   if( sNow > target && iSpeed >0 || sNow < target && iSpeed <0 ){119                                       sNow = target120                                   }121                                   122                                   obj.style[attr] = sNow/100;123                                   obj.style.filter = alpha(opacity=+sNow+);124                               }else{125                                   126                                   var sNow = parseInt(css(obj,attr)) + iSpeed;127                                   128                                   //先做处理 再赋值129                                   if( sNow > target && iSpeed >0 || sNow < target && iSpeed <0 ){130                                       sNow = target131                                   }132                                   obj.style[attr] = sNow +px;133                               }134  135                          }136 137                         }138                         139                         if(iBtn){ //如果运动全部完成,iBtn为true140                             clearInterval(obj.timer);141                             fn && fn()142                         }143  144                 },30)145             }146 147         </script>148     </head>149     <body>150          <div id="div1">151              <ul>152                 <li mars=‘1‘><img src="3-images/1.jpg"><span    class="t">1</span></li>153                 <li mars=‘2‘><img src="3-images/2.jpg"><span    class="t">2</span></li>154                 <li mars=‘3‘><img src="3-images/3.jpg"><span    class="t">3</span></li>155                 <li mars=‘4‘><img src="3-images/4.jpg"><span    class="t">4</span></li>156                 <li mars=‘5‘><img src="3-images/5.jpg"><span    class="t">5</span></li>157             </ul>158          </div>     159     </body>160 </html>
View Code

 

JS 仿淘宝幻灯片 非完整版 小案例