分享一個輪顯廣告的實現方法

時間 2020-05-24

標籤分享一個廣告實現方法简体版

原文原文鏈接

HTML

首先html中的<head>中使用了jquery的類庫

<scriptsrc="js/jquery-1.4.2.min.js"type="text/javascript"></script>

    
    
    
    
     
     
     
     <divclass="slides"name="__DT">javascript
     
     
     
     <ulclass="slide-pic">css
     
     
     
     <li><ahref="#"><imgalt="ceshi"src="p_w_picpaths/201232615333991535.jpg"></a>html
     
     
     
     <liclass="cur"><ahref="#"><imgalt="ceshi"src="p_w_picpaths/201232615333991535.jpg"></a>java
     
     
     
     <li><ahref="#"><imgalt="ceshi"src="p_w_picpaths/201232615333991535.jpg"></a>jquery
     
     
     
     <li><ahref="#"><imgalt="ceshi"src="p_w_picpaths/201232615333991535.jpg"></a>ide
     
     
     
     <li><ahref="#"><imgalt="ceshi"src="p_w_picpaths/201232615333991535.jpg"></a></li>this
     
     
     
     </ul>spa
     
     
     
     <ulclass="slide-li op">xml
     
     
     
     <liclass="cur"></li>htm
     
     
     
     <li></li>
     
     
     
     <li></li>
     
     
     
     <li></li>
     
     
     
     <li></li>
     
     
     
     </ul>
     
     
     
     <ulclass="slide-li slide-txt">
     
     
     
     <liclass="cur"><ahref="#">ceshi</a></li>
     
     
     
     <li><ahref="#">ceshi</a></li>
     
     
     
     <li><ahref="#">ceshi</a></li>
     
     
     
     <li><ahref="#">ceshi</a></li>
     
     
     
     <li><ahref="#">ceshi</a></li>
     
     
     
     </ul>
     
     
     
     </div>

注意cur這個class的使用，不要麼每一個<li>都加上class="cur"而是應該讓js來實現它的變換在最後引用了js文件，注意文件要放在<body>標籤裏，爲了更快的加載，最好把js文件放到body的末尾

<scriptsrc="js/hp1.js"type="text/javascript"></script>

文件的具體內容

          
          
          
          
           
           
           
           var defaultOpts = { interval: 5000, fadeInTime: 300, fadeOutTime: 200 }; 
           
           
           
           //Iterate over the current set of matched elements
           
           
           
           var _titles = $("ul.slide-txt li"); 
           
           
           
           var _titles_bg = $("ul.op li"); 
           
           
           
           var _bodies = $("ul.slide-pic li"); 
           
           
           
           var _count = _titles.length; 
           
           
           
           var _current = 0; 
           
           
           
           var _intervalID = null; 
           
           
           
           var stop = function() { window.clearInterval(_intervalID); }; 
           
           
           
           var slide = function(opts) { 
           
           
           
           if (opts) { 
           
           
           
           _current = opts.current || 0; 
           
           
           
           } else { 
           
           
           
           _current = (_current >= (_count - 1)) ? 0 : (++_current); 
           
           
           
           }; 
           
           
           
           _bodies.filter(":visible").fadeOut(defaultOpts.fadeOutTime, function() { 
           
           
           
           _bodies.eq(_current).fadeIn(defaultOpts.fadeInTime); 
           
           
           
           _bodies.removeClass("cur").eq(_current).addClass("cur"); 
           
           
           
           }); 
           
           
           
           _titles.removeClass("cur").eq(_current).addClass("cur"); 
           
           
           
           _titles_bg.removeClass("cur").eq(_current).addClass("cur"); 
           
           
           
           }; //endof slide
           
           
           
           var go = function() { 
           
           
           
           stop(); 
           
           
           
           _intervalID = window.setInterval(function() { slide(); }, defaultOpts.interval); 
           
           
           
           }; //endof go
           
           
           
           var itemMouseOver = function(target, items) { 
           
           
           
           stop(); 
           
           
           
           var i = $.inArray(target, items); 
           
           
           
           slide({ current: i }); 
           
           
           
           }; //endof itemMouseOver
           
           
           
           _titles.hover(function() { if($(this).attr('class')!='cur'){itemMouseOver(this, _titles); }else{stop();}}, go); 
           
           
           
           //_titles_bg.hover(function() { itemMouseOver(this, _titles_bg); }, go);
           
           
           
           _bodies.hover(stop, go); 
           
           
           
           //trigger the slidebox
           
           
           
           go();