html渐隐轮播

这是我之前用的时候从一个模板中下载下来用的，现在又用到了，我又重新找了一遍，为防止我下次用到忘记，特写下此文：

下载插件：jquery-2.1.4.min.js和slider.js

首页轮播页面首页index.html:

   doctype html  > 
   html   xmlns  ="http://HdhCmsTestw3.org/1999/xhtml"  > 

   head  > 
   meta   http-equiv  ="Content-Type"   content  ="text/html; charset=utf-8"   /> 
   link   href  ="css/banner.css"   rel  ="stylesheet"  > 
   head  > 
   body  > 
   div   id  ="banner_tabs"   class  ="flexslider"  > 
       ul   class  ="slides"  > 
           li  > 
                       a   title  =""   target  ="_blank"   href  ="#"  > 
               img   width  ="1010"   height  ="450"   alt  =""   style  ="background: url(images/bgi1.jpg) no-repeat center;"   src  ="images/alpha.png"  > 
                       a  > 
           li  > 
           li  > 
                       a   title  =""   href  ="#"  > 
               img   width  ="1010"   height  ="450"   alt  =""   style  ="background: url(images/bgi2.jpg) no-repeat center;"   src  ="images/alpha.png"  > 
                       a  > 
           li  > 
           li  > 
                       a   title  =""   href  ="#"  > 
               img   width  ="1010"   height  ="450"   alt  =""   style  ="background: url(images/bgi3.jpg) no-repeat center;"   src  ="images/alpha.png"  > 
                       a  > 
           li  > 
           li  > 
                       a   title  =""   href  ="#"  > 
               img   width  ="1010"   height  ="450"   alt  =""   style  ="background: url(images/bgi4.jpg) no-repeat center;"   src  ="images/alpha.png"  > 
                       a  > 
           li  > 
           li  > 
                       a   title  =""   href  ="#"  > 
               img   width  ="1010"   height  ="450"   alt  =""   style  ="background: url(images/bgi5.jpg) no-repeat center;"   src  ="images/alpha.png"  > 
                       a  > 
           li  > 
       ul  > 
       ul   class  ="flex-direction-nav"  > 
           li  >  a   class  ="flex-prev"   href  ="javascript:;"  > Previous   a  >  li  > 
           li  >  a   class  ="flex-next"   href  ="javascript:;"  > Next   a  >  li  > 
       ul  > 
       ol   id  ="bannerCtrl"   class  ="flex-control-nav flex-control-paging"  > 
           li  >  a  > 1   a  >  li  > 
           li  >  a  > 2   a  >  li  > 
           li  >  a  > 3   a  >  li  > 
           li  >  a  > 4   a  >  li  > 
           li  >  a  > 5   a  >  li  > 
       ol  > 
   div  > 
       script   src  ="js/jquery-2.1.4.min.js"  >  script  > 
   script   src  ="js/slider.js"  >  script  > 
   script   type  ="text/javascript"  >  
$(  function  () {
      var   bannerSlider   =   new   Slider($(  '  #banner_tabs  '  ), {
        time: 36  00  ,
        delay:   400  ,
        event:   '  hover  '  ,
        auto:   true  ,
        mode:   '  fade  '  ,
        controller: $(  '  #bannerCtrl  '  ),
        activeControllerCls:   '  active  '  
    });
    $(  '  #banner_tabs .flex-prev  '  ).click(  function  () {
        bannerSlider.prev()
    });
    $(  '  #banner_tabs .flex-next  '  ).click(  function  () {
        bannerSlider.next()
    });
})
    script  > 
   body  > 
   html  >  

查看更多关于html渐隐轮播的详细内容...