js多屏纵横向切换多图广告特效

两天
学习资料2838.3K1字数 3938阅读13分7秒阅读模式

从 知更鸟 扒下来的，请知更鸟勿怪 啊~~

做图片展示或者广告都不错~~~能力有限，代码扒的可能不够完善，请自己谨慎使用。
1.纵向
效果：文章源自两天的博客-https://2days.org/2463.html

国内主机文章源自两天的博客-https://2days.org/2463.html

js多屏纵横向切换多图广告特效-图片1

国外主机文章源自两天的博客-https://2days.org/2463.html

js多屏纵横向切换多图广告特效-图片1

专业博客主机文章源自两天的博客-https://2days.org/2463.html

js多屏纵横向切换多图广告特效-图片1


文章源自两天的博客-https://2days.org/2463.html

代码：

展开收缩

文章源自两天的博客-https://2days.org/2463.html
  1. <div class="droplist" id=lrtk>  
  2.             <dl>  
  3.               <dt><p>国内主机</p></dt>  
  4.               <dd><a class=hot href="http://idc.wopus.org/" target=_blank title="国内主机"><img src="http://zmingcx.com/wp-content/uploads/2013/10/idc1.jpg"></a></dd>  
  5.               <dt><p> 国外主机</p></dt>  
  6.               <dd style="display: none"><a class=hot href="http://idc.wopus.org/" target=_blank title="国外主机"><img src="http://zmingcx.com/wp-content/uploads/2013/10/idc2.jpg"></a></dd>  
  7.               <dt><p>专业博客主机</p></dt>  
  8.               <dd style="display: none"><a class=hot href="http://idc.wopus.org/" target=_blank title="域名注册"><img src="http://zmingcx.com/wp-content/uploads/2013/10/idc3.jpg"></a></dd>  
  9.             </dl>  
  10.         </div>  
  11. <style type="text/css">  
  12. .droplist dl,.droplist dt,.droplist dd{  
  13.     padding: 0px;  
  14.     margin: 0px;  
  15.     color: #fff;  
  16.  }  
  17. .droplist {  
  18.     width: 230px;  
  19. }  
  20. .droplist dl dt {  
  21.     background: #c01e22;  
  22.     border-top: 1px solid #ccc;  
  23.     width: 230px;  
  24.     text-indent: 20px;  
  25.     line-height: 29px;  
  26.     height: 29px;  
  27. }  
  28. .droplist dl dt p {  
  29.     cursor: pointer;  
  30. }  
  31. .droplist dl dt p.droplist-hover {  
  32.     background: #910004;  
  33. }  
  34. .droplist dl dd {  
  35.     display: none;  
  36.     overflow:hidden;  
  37.     width: 230px;  
  38.     height: 140px;  
  39. }  
  40. .droplist dl dd img {  
  41. }  
  42. </style>  
  43. <script type="text/javascript">  
  44. $.fn.extend({  
  45.    adadvance:function(){  
  46.     var listobj=this;  
  47.         var objs =$('dt',this);  
  48.     var view =objs.length-1;//parseInt( Math.random()*objs.length);  
  49.     objs.each(function(i){  
  50.     $(this).mouseover(function(){ $('dd',listobj).hide();$('.droplist-hover',listobj).attr("class","");$("dd a").fadeIn(1000);$(this).children("p").attr("class","droplist-hover");$(this).next().show()})  
  51.     if(i!=view)  
  52.     {  
  53.         $(this).next().hide();  
  54.     }  
  55.     else  
  56.     {  
  57.         $(this).next().show();  
  58.         $(this).children("p").attr("class","droplist-hover");  
  59.     }  
  60.     });  
  61.     }  
  62. });  
  63. </script>  
  64. <script type=text/javascript>$('#lrtk').adadvance();</script>     

文章源自两天的博客-https://2days.org/2463.html

2.横向
效果：文章源自两天的博客-https://2days.org/2463.html

    专业博客主机

    js多屏纵横向切换多图广告特效-图片2

    国外主机

    js多屏纵横向切换多图广告特效-图片2

    国内主机

    js多屏纵横向切换多图广告特效-图片2


文章源自两天的博客-https://2days.org/2463.html

代码：

展开收缩

文章源自两天的博客-https://2days.org/2463.html
  1. <div id="idc_box">  
  2.             <ul>  
  3.                 <dd class="hove" style="width: 21px;"><dl class="">专业博客主机</dl><a href="http://idc.wopus.org/" target="_blank" title="专业博客主机"><img src="http://zmingcx.com/wp-content/uploads/2013/10/idc-a.jpg"></a></dd>  
  4.                 <dd style="width: 21px;"><dl class="">国外主机</dl><a href="http://idc.wopus.org/" target="_blank" title="国外主机"><img src="http://zmingcx.com/wp-content/uploads/2013/10/idc-c.jpg"></a></dd>  
  5.                 <dd style="width: 187px;"><dl class="hove">国内主机</dl><a href="http://idc.wopus.org/" target="_blank" title="国内主机"><img src="http://zmingcx.com/wp-content/uploads/2013/10/idc-b.jpg"></a></dd>  
  6.             </ul>  
  7.         </div>  
  8. <style type="text/css">  
  9. #idc_box ul, #idc_box dd, #idc_box dl{  
  10.     margin:0px;  
  11.     padding:0px;  
  12.     float:left;  
  13.     list-style: none;  
  14. }  
  15. #idc_box{  
  16.     width:229px;  
  17.     height:230px;  
  18.     border-left: 1px solid #740a20;  
  19. }  
  20. #idc_box dd{  
  21.     width:21px;  
  22.     height:230px;  
  23.     overflow:hidden;  
  24.     position:relative;  
  25. }  
  26. #idc_box dd.hove{  
  27.     width:187px;  
  28.     text-align:right;  
  29. }  
  30. #idc_box dd dl{  
  31.     width:20px;  
  32.     height:230px;  
  33.     top:0px;  
  34.     left:0px;  
  35.     color:#fff;  
  36.     cursor:pointer;  
  37.     text-align:center;  
  38.     padding:20px 0 0 0;  
  39.     background:#b9000d;  
  40.     position:absolute;  
  41.     border-right:1px solid #740a20;  
  42. }  
  43. #idc_box dd dl.hove{  
  44.     background:#620317;  
  45. }  
  46. </style>  
  47. <script type="text/javascript">  
  48. function myAddEvent(obj, sEvent, fn){  
  49.     return obj.attachEvent ? obj.attachEvent('on' + sEvent, fn) : obj.addEventListener(sEvent, fn, false);  
  50. }  
  51. function Class(oParent, sClass){  
  52.     var aElem = oParent.getElementsByTagName('*');  
  53.     var aClass = [];  
  54.     var i = 0;  
  55.     for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);  
  56.     return aClass;  
  57. };  
  58. function css(obj, attr, value){  
  59.     if(arguments.length == 2){  
  60.         var style = obj.style,  
  61.             currentStyle = obj.currentStyle;  
  62.         if(typeof attr === 'string')return currentStyle ? currentStyle[attr] : getComputedStyle(obj, false)[attr];  
  63.         for(var propName in attr)propName == 'opacity' ? (style.filter = "alpha(opacity=" + attr[propName] + ")", style.opacity = attr[propName] / 100) : style[propName] = attr[propName];   
  64.     }else if(arguments.length == 3){  
  65.         switch(attr){  
  66.             case "width":  
  67.             case "height":  
  68.             case "paddingTop":  
  69.             case "paddingRight":  
  70.             case "paddingBottom":  
  71.             case "paddingLeft":  
  72.             case "top":  
  73.             case "right":  
  74.             case "bottom":  
  75.             case "left":  
  76.             case "marginTop":  
  77.             case "marginRigth":  
  78.             case "marginBottom":  
  79.             case "marginLeft":  
  80.                 obj.style[attr] = value + "px";  
  81.                 break;  
  82.             case "opacity":  
  83.                 obj.style.filter = "alpha(opacity=" + value + ")";  
  84.                 obj.style.opacity = value / 100;  
  85.                 break;  
  86.             default:  
  87.                 obj.style[attr] = value  
  88.         }  
  89.     }  
  90. };  
  91. function extend(destination, source){  
  92.     for (var propName in source) destination[propName] = source[propName];  
  93.     return destination  
  94. };  
  95. function doMove(obj, json, fnEnd){  
  96.     clearInterval(obj.timer);  
  97.     obj.iSpeed = 0;  
  98.     fnEnd = extend({  
  99.         type: "buffer",  
  100.         callback: function() {}  
  101.     }, fnEnd);  
  102.     obj.timer = setInterval(function(){  
  103.         var iCur = 0,  
  104.             iStop = true;  
  105.         for(var propName in json){  
  106.             iCur = parseFloat(css(obj, propName));  
  107.             propName == 'opacity' && (iCur = Math.round(iCur * 100));  
  108.             switch(fnEnd.type){  
  109.                 case 'buffer':  
  110.                     obj.iSpeed = (json[propName] - iCur) / 5;  
  111.                     obj.iSpeed = obj.iSpeed > 0 ? Math.ceil(obj.iSpeed) : Math.floor(obj.iSpeed);  
  112.                     json[propName] == iCur || (iStop = false, css(obj, propName, iCur + obj.iSpeed));  
  113.                     break;  
  114.                 case 'elasticity':  
  115.                     obj.iSpeed += (json[propName] - iCur) / 5;  
  116.                     obj.iSpeed *= 0.75;  
  117.                     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));  
  118.                     break;  
  119.                 case 'accelerate':  
  120.                     obj.iSpeed = obj.iSpeed + 5;  
  121.                     iCur >= json[propName] ? css(obj, propName, json[propName]) : css(obj, propName, json[propName]) || (iStop = false, css(obj, propName, iCur + obj.iSpeed));  
  122.                 break;  
  123.             }  
  124.         }  
  125.         if(iStop){  
  126.             clearInterval(obj.timer);  
  127.             obj.timer = null;  
  128.             obj.iSpeed = 0;  
  129.             fnEnd.callback();  
  130.         }  
  131.     },30);  
  132. };  
  133. </script>  
  134. <script type="text/javascript">  
  135. window.onload = function(){  
  136.     var oBox = document.getElementById('idc_box')  
  137.     var aSpan = document.getElementsByTagName('dl');  
  138.     var aLi = document.getElementsByTagName('dd');  
  139.     var playtime = null;  
  140.     var iNow = 0;  
  141.     for(i=0;i<aSpan.length;i++){  
  142.         aSpan[i].index = i;  
  143.         aSpan[i].onclick = function(){  
  144.             for(var len=aLi.length,i=0;i<len;i++)doMove(aLi[i], {width:21});  
  145.             for(var len=aSpan.length,i=0;i<len;i++)aSpan[i].className = '';  
  146.             this.className = 'hove';  
  147.             doMove(this.parentNode, {width:187});  
  148.             iNow = this.index;  
  149.         };  
  150.     }  
  151.     playtime = setInterval(tab,3500);  
  152.     oBox.onmouseover = function(){  
  153.         clearInterval(playtime);  
  154.     }  
  155.     oBox.onmouseout = function(){  
  156.         playtime = setInterval(tab,3500);  
  157.     }  
  158.     function tab(){  
  159.         iNow == aLi.length-1 ? iNow = 0 : iNow++;  
  160.         aSpan[iNow].onclick();  
  161.     }  
  162. };  
  163. </script>  

本站文章大部分始于原创，用于个人学习记录，可能对您有所帮助，仅供参考！

这几天的琐事
这几天的琐事
这几天的琐事
支持https的js分享插件 (QQ空间，微信，新浪微博。。。)
支持https的js分享插件 (QQ空间，微信，新浪微博。。。)
无聊的周六
无聊的周六
无聊的周六
58项经典的JS代码
58项经典的JS代码
58项经典的JS代码
weinxin
312379857
←QQ扫一扫添加QQ好友
版权声明：本站原创文章转载请注明文章出处及链接，谢谢合作！
广告也精彩
 最后更新：2015-8-9
  • 广告
  • JS
  • 特效
评论  28  访客  14  作者  14
    • 好邻居
      好邻居 0
      福建省厦门市 5F
      回复

      这样就可以实现啦~略好呀！

      • 邪恶漫画
        邪恶漫画 1
        江苏省镇江市 4F
        回复

        怎么闹的

        • A.yi
          A.yi 3
          广东省中山市 3F
          回复

          这个不是插件实现滴？ 怎么弄具体？

            • 两天
              两天
              山东省 B1
              回复

              @ A.yi comment” /> 这个不是插件啊，上面不是有代码的么，修改下放到需要的位置就好.

                • A.yi
                  A.yi 3
                  广东省中山市 B2
                  回复

                  @ 两天 不是呃，我是说你的代码高亮，你不是说可以不用代码高亮插件实现的吗？

                    • 两天
                      两天
                      山东省 B3
                      回复

                      @ A.yi comment” /> 原来是这个啊，这个是加载了css弄得~~~先转换，然后插入就行http://zmingcx.com/coderender

                        • A.yi
                          A.yi 3
                          广东省中山市 B4
                          回复

                          @ 两天 汗， 那还是算了吧，这个太麻烦才发现用多说可以分享到微博，然后就可以@到我

                            • 两天
                              两天
                              山东省滨州市 B5
                              回复

                              @ A.yi comment” /> 绑定账号就可以咯

                                • A.yi
                                  A.yi 3
                                  广东省中山市 B6
                                  回复

                                  @ 两天 嗯， 我就说我微博怎么破天荒的有人 提到我 了呢

                                    • 两天
                                      两天
                                      山东省滨州市 B7
                                      回复

                                      @ A.yi comment” /> 这样传播的更多

                                        • A.yi
                                          A.yi 3
                                          广东省中山市 B8
                                          回复

                                          @ 两天 个人觉得就是没 评论回复邮件很不爽

                                            • 两天
                                              两天
                                              山东省滨州市 B9

                                              @ A.yi 应该有的吧….

                                              • A.yi
                                                A.yi 3
                                                广东省中山市 B9

                                                @ 两天 没有好吧，比如你刚回复我，没有邮件提醒的

                                                • 两天
                                                  两天
                                                  山东省 B9

                                                  @ A.yi comment” /> 我记得后台有设置回复提醒的啊 ，可以按天或者按周，每次回复都提醒应该有的 comment” />

                                                  • A.yi
                                                    A.yi 3
                                                    广东省中山市 B9

                                                    @ 两天 没有的。。。 以前用过多说，多说现在是这么个情况 你去官网查查就知道了

                                                    • 两天
                                                      两天
                                                      上海市 B9

                                                      @ A.yi 囧，那得建议多说添加评论通知功能了。

                                                      • A.yi
                                                        A.yi 3
                                                        广东省中山市 B9

                                                        @ 两天 N年前都有人建议过了 comment” />

                                                        • 两天
                                                          两天
                                                          上海市 B9

                                                          @ A.yi 我刚才竟然收到多说的回复通知了 comment” />

                                                          • A.yi
                                                            A.yi 3
                                                            广东省中山市 B9

                                                            @ 两天 你当然有啊，我是说你回复给我的 没有邮件通知 comment” />

                                                            • 两天
                                                              两天
                                                              山东省滨州市 B9

                                                              @ A.yi comment” /> 为啥我的有你的没有

                                            • 许露琪
                                              许露琪 9
                                              天津市 2F
                                              回复

                                              非常感谢分享~这个大概是懂了~另外，还想问一下，你网页中的京东联盟的地址是？我看了一下，网上有好多个京东联盟，我不知道用哪个，能分享一下吗？谢谢

                                                • 两天
                                                  两天
                                                  山东省 B1
                                                  回复

                                                  @ 许露琪 呃，京东联盟？我不知道啊，没用过 comment” />

                                                    • 许露琪
                                                      许露琪 9
                                                      天津市 B2
                                                      回复

                                                      @ 两天 原来如此~一看就是网页设计的高手！ comment” /> 再请教一下，知更鸟主题能不能让在blog模式下，顶置文章显示全文？求教~

                                                        • 两天
                                                          两天
                                                          山东省滨州市 B3
                                                          回复

                                                          @ 许露琪 comment” /> 俺其实就是菜鸟，这个不懂，你问下知更鸟应该可以，或者搜索下 顶置文章显示全文

                                                    • Leniy
                                                      Leniy 4
                                                      山东省济宁市 1F
                                                      回复

                                                      一直不理解这个多屏是啥意思，多显示器支持？

                                                        • 两天
                                                          两天
                                                          山东省滨州市 B1
                                                          回复

                                                          @ Leniy comment” /> 就是有多个链接，多个图片 comment” />

                                                      匿名

                                                      发表评论

                                                      匿名网友
                                                      :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
                                                      确定

                                                      拖动滑块以完成验证