banner图一直显示不出来，谁可以帮忙看一下

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript">
           var data = [

               {
                   img: 1,
                   h1: 'Creative',
                   h2: 'DUET'
               },

               {
                   img: 2,
                   h1: 'Friendly',
                   h2: 'DEVIL'
               },

               {
                   img: 3,
                   h1: 'Tranquilent',
                   h2: 'COMPATRIOT'
               },

               {
                   img: 4,
                   h1: 'Insecure',
                   h2: 'HUSSLER'
               },

               {
                   img: 5,
                   h1: 'Loving',
                   h2: 'REBEL'
               },

               {
                   img: 6,
                   h1: 'Passionate',
                   h2: 'SEEKER'
               },

               {
                   img: 7,
                   h1: 'Crazy',
                   h2: 'FRIEND'
               }

           ];
           var g = function(id) {
               if(id.substr(0,1)=='.') {
                   return document.getElementsByClassName(id.substr(1));
               }
               return document.getElementById(id);
           }

           function addSliders() {
               var tpl_main = g('template_main').innerHTML
                      .replace(/^\s*/,'')
                      .replace(/\s*$/,'');
               var tpl_ctrl = g('template_ctrl').innerHTML
                   .replace(/^\s*/,'')
                    .replace(/\s*$/,'');
               var out_main = [];
               var out_ctrl = [];
               for(var i in data) {
                   var _html_main = tpl_main
                       .replace(/{{index}}/g, data[i].img)
                       .replace(/{{h2}}/g, data[i].h1)
                       .replace(/{{h3}}/g, data[i].h2);
                   var _html_ctrl = tpl_ctrl
                       .replace(/{{index}}/g, data[i].img);
                   out_main.push(_html_main);
                   out_ctrl.push(_html_ctrl);
               }
               g('template_main').innerHTML = out_main.join('');
               g('template_ctrl').innerHTML = out_ctrl.join('');
           }

           function switchSlider(n) {
               var main = g('main_' + n);
               var ctrl = g('ctrl_' + n);
               var clear_main = g('.main-i');
               var clear_ctrl = g('.ctrl-i');
               for(i = 0; i < clear_main.length; i++) {
                   clear_main[i].className = clear_main[i].className
                       .replace('main-i_active', '');
                   clear_ctrl[i].className = clear_ctrl[i].className
                       .replace('ctrl-i_active', '');;
               }
               main.className += 'main-i_active';
               ctrl.className += 'ctrl-i_active';
           }
           window.onload = function() {
               addSliders();
           }
       </script>
   </head>
   <body>
       <div class="slider">
           <div class="main" id="template_main">
               <div class="main-i" id="main_{{index}}">
                   <div class="caption">
                       <h2 class="caption_h2">{{h2}}</h2>
                       <h3 class="caption_h3">{{h3}}</h3>
                   </div>
                   <img src="img/{{index}}.jpg">
               </div>
           </div>
           <div class="ctrl" id="template_ctrl">
               <a href="" class="ctrl-i" id="ctrl_{{index}}" href="javascript:switchSlider({{index}})"><img src="img/{{index}}.jpg"></a>
           </div>
       </div>
   </body>

</html>

慕UI0157016

浏览 1694回答 0

0回答

随时随地看视频慕课网APP