仓蓝

日记本
  BlogJava :: 首页 :: 联系 :: 聚合  :: 管理
  23 Posts :: 0 Stories :: 1 Comments :: 0 Trackbacks
可以用在WordPress侧栏的一组图片广告轮播的代码
本文介绍一组适用于在Wordpress侧栏放置的图片广告轮播（js）代码：可自动播放，同时响应访客的点击

1.样式表

  1. /*SidebarTabsAd*/  
  2. #cwpad_box{width:100%;text-align:center}   
  3. #cwpad_box ul, #cwpad_box dd, #cwpad_box tt{   
  4.     margin:0px;   
  5.     padding:0px;   
  6.     float:left;   
  7.     list-style: none;   
  8. }   
  9. #cwpad_box{   
  10.     width:313px;/*250px+(n-1)*21px*/  
  11.     height:250px;   
  12.     border-left: 1px solid #740a20;   
  13. }   
  14. #cwpad_box dd{   
  15.     width:21px;   
  16.     height:250px;   
  17.     overflow:hidden;   
  18.     position:relative;   
  19. }   
  20. #cwpad_box dd.hove{   
  21.     width:250px;   
  22.     text-align:rightright;   
  23. }   
  24. #cwpad_box dd tt{   
  25.     width:20px;   
  26.     height:250px;   
  27.     top:0px;   
  28.     left:0px;   
  29.     color:#fff;   
  30.     cursor:pointer;   
  31.     text-align:center;   
  32.     padding:20px 0 0 0;   
  33.     background:#b9000d;   
  34.     position:absolute;   
  35.     border-right:1px solid #740a20;   
  36. }   
  37. #cwpad_box dd tt.hove{   
  38.     background:#620317;   
  39. }  

在上面的样式表中，假设放置的是四个250px*250px的图片广告，所以250+（4-1）*21=313px。

2.javascript代码

  1. <script type="text/javascript">   
  2. function myAddEvent(obj, sEvent, fn){   
  3.     return obj.attachEvent ? obj.attachEvent('on' + sEvent, fn) : obj.addEventListener(sEvent, fn, false);   
  4. }   
  5. function Class(oParent, sClass){   
  6.     var aElem = oParent.getElementsByTagName('*');   
  7.     var aClass = [];   
  8.     var i = 0;   
  9.     for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);   
  10.     return aClass;   
  11. };   
  12. function css(obj, attr, value){   
  13.     if(arguments.length == 2){   
  14.         var style = obj.style,   
  15.             currentStyle = obj.currentStyle;   
  16.         if(typeof attr === 'string')return currentStyle ? currentStyle[attr] : getComputedStyle(obj, false)[attr];   
  17.         for(var propName in attr)propName == 'opacity' ? (style.filter = "alpha(opacity=" + attr[propName] + ")", style.opacity = attr[propName] / 100) : style[propName] = attr[propName];    
  18.     }else if(arguments.length == 3){   
  19.         switch(attr){   
  20.             case "width":   
  21.             case "height":   
  22.             case "paddingTop":   
  23.             case "paddingRight":   
  24.             case "paddingBottom":   
  25.             case "paddingLeft":   
  26.             case "top":   
  27.             case "right":   
  28.             case "bottom":   
  29.             case "left":   
  30.             case "marginTop":   
  31.             case "marginRigth":   
  32.             case "marginBottom":   
  33.             case "marginLeft":   
  34.                 obj.style[attr] = value + "px";   
  35.                 break;   
  36.             case "opacity":   
  37.                 obj.style.filter = "alpha(opacity=" + value + ")";   
  38.                 obj.style.opacity = value / 100;   
  39.                 break;   
  40.             default:   
  41.                 obj.style[attr] = value   
  42.         }   
  43.     }   
  44. };   
  45. function extend(destination, source){   
  46.     for (var propName in source) destination[propName] = source[propName];   
  47.     return destination   
  48. };   
  49. function doMove(obj, json, fnEnd){   
  50.     clearInterval(obj.timer);   
  51.     obj.iSpeed = 0;   
  52.     fnEnd = extend({   
  53.         type: "buffer",   
  54.         callback: function() {}   
  55.     }, fnEnd);   
  56.     obj.timer = setInterval(function(){   
  57.         var iCur = 0,   
  58.             iStop = true;   
  59.         for(var propName in json){   
  60.             iCur = parseFloat(css(obj, propName));   
  61.             propName == 'opacity' && (iCur = Math.round(iCur * 100));   
  62.             switch(fnEnd.type){   
  63.                 case 'buffer':   
  64.                     obj.iSpeed = (json[propName] - iCur) / 5;   
  65.                     obj.iSpeed = obj.iSpeed > 0 ? Math.ceil(obj.iSpeed) : Math.floor(obj.iSpeed);   
  66.                     json[propName] == iCur || (iStop = false, css(obj, propName, iCur + obj.iSpeed));   
  67.                     break;   
  68.                 case 'elasticity':   
  69.                     obj.iSpeed += (json[propName] - iCur) / 5;   
  70.                     obj.iSpeed *= 0.75;   
  71.                     Math.abs(json[propName] - iCur) <= 1 &&  Math.abs(obj.iSpeed) <= 1 ? css(obj, propName, json[propName]) : css(obj, propName, json[propName]) || (iStop = false, css(obj, propName, iCur + obj.iSpeed));   
  72.                     break;   
  73.                 case 'accelerate':   
  74.                     obj.iSpeed = obj.iSpeed + 5;   
  75.                     iCur >= json[propName] ? css(obj, propName, json[propName]) : css(obj, propName, json[propName]) || (iStop = false, css(obj, propName, iCur + obj.iSpeed));   
  76.                 break;   
  77.             }   
  78.         }   
  79.         if(iStop){   
  80.             clearInterval(obj.timer);   
  81.             obj.timer = null;   
  82.             obj.iSpeed = 0;   
  83.             fnEnd.callback();   
  84.         }   
  85.     },30);   
  86. };   
  87.   
  88. window.onload = function(){   
  89.     var oBox = document.getElementById('cwpad_box')   
  90.     var aSpan = document.getElementsByTagName('tt');   
  91.     var aLi = document.getElementsByTagName('dd');   
  92.     var playtime = null;   
  93.     var iNow = 0;   
  94.     for(i=0;i<aSpan.length;i++){   
  95.         aSpan[i].index = i;   
  96.         aSpan[i].onclick = function(){   
  97.             for(var len=aLi.length,i=0;i<len;i++)doMove(aLi[i], {width:21});   
  98.             for(var len=aSpan.length,i=0;i<len;i++)aSpan[i].className = '';   
  99.             this.className = 'hove';   
  100.             doMove(this.parentNode, {width:250});   
  101.             iNow = this.index;   
  102.         };   
  103.     }   
  104.     playtime = setInterval(tab,3500);   
  105.     oBox.onmouseover = function(){   
  106.         clearInterval(playtime);   
  107.     }   
  108.     oBox.onmouseout = function(){   
  109.         playtime = setInterval(tab,3500);   
  110.     }   
  111.     function tab(){   
  112.         iNow == aLi.length-1 ? iNow = 0 : iNow++;   
  113.         aSpan[iNow].onclick();   
  114.     }   
  115. };   
  116.  </script>    

 

3.示例的HTML代码

  1. <div id="cwpad_box">  
  2.     <ul>  
  3.         <dd  class="hove">  
  4.         <tt class="hove">网站设计及培训</tt>  
  5.         <a href="http://suoling.net/" target=_blank title="网站设计及培训"><img src="http://fakeimg.pl/250x250/?text=Hello,A!"></a>  
  6.         </dd>  
  7.         <dd>  
  8.         <tt>网站优化及培训</tt>  
  9.         <a href="http://suoling.net/" target=_blank title="网站优化及培训"><img src="http://fakeimg.pl/250x250/?text=Hello,B!"></a>  
  10.         </dd>  
  11.         <dd>  
  12.         <tt>网站诊断</tt>  
  13.         <a href="http://suoling.net/" target=_blank title="网站诊断"><img src="http://fakeimg.pl/250x250/?text=Hello,C!"></a>  
  14.         </dd>  
  15.         <dd>  
  16.         <tt>电子商务培训</tt>  
  17.         <a href="http://suoling.net/" target=_blank title="电子商务培训"><img src="http://fakeimg.pl/250x250/?text=Hello,D!"></a>  
  18.         </dd>  
  19.     </ul>  
  20. </div>  

使用的是索凌网络前面介绍过的"假图"生成网站fakeimg.pl生成的"假图"。

这组代码的一个显著缺点是：不适合移动设备显示。

posted on 2013-12-31 11:30 cangshi 阅读(284) 评论(0)  编辑  收藏 所属分类: php 、wordpress

只有注册用户登录后才能发表评论。
网站导航: