javascript--简单幻灯片

来源：互联网发布：ubuntu嵌入式工控机编辑：程序博客网时间：2024/06/05 09:28
用代码实现幻灯片
<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>幻灯片</title>  <style>     *{padding:0;margin:0;} body{   padding:50px 0;   background-color:#fff;   font-size:14px;   font-family:'Avenir14px';   color:#555;   -webkit-font-smoothing:antialiased;/*字体抗锯齿*/ } .slider .main .main-i, .slider .main, .slider{ width:100%; height:400px; position:relative; }     /*幻灯片区域*/ .slider .main{ overflow:hidden; }     /*每个幻灯片的样式*/ .slider .main .main-i{} /*幻灯片*/ .slider .main .main-i img{   width:100%;   position:absolute;/*飘起来*/   left:0;   top:50%;   z-index:1; } /*字体*/ .slider .main .main-i .caption{   position:absolute;       right:50%;   top:30%;   z-index:9; } .slider .main .main-i .caption h2{   font-size:40px;   line-height:50px;   color:#b5b5b5;   text-align:right; } .slider .main .main-i .caption h3{   font-size:70px;   line-height:70px;   color:#000000;   text-align:right;   font-family:'Open Sans Condensed';   }     /*控制按钮*/ .slider .ctrl{   width:100%;       height:13px;   line-height:13px;   text-align:center;   position:absolute;   left:0;   bottom:-13px; }     .slider .ctrl .ctrl-i{ /*只有设置为inline-black，设置a元素的高和宽才会起作用*/   display:inline-block;   width:150px;   height:13px;   background-color:#666;       box-shadow:0 1px 1px rgba{0,0,0,.3};   position:relative;   margin-left:1px; } .slider .ctrl .ctrl-i img{   width:100%;   position:absolute;   left:0;   bottom:50px;   z-index:1;       opacity:0;       -webkit-transition:all .2s; /*渐变动画*/ } /*hover到控制按钮的样式*/ .slider .ctrl .ctrl-i:hover{   background-color:#f0f0f0; }     /*鼠标悬浮在小图位置就显示小图*/ .slider .ctrl .ctrl-i:hover img{   bottom:13px;   -webkit-box-reflect:below 0px -webkit-gradient(     linear, left top, left bottom, from(transparent), color-stop(50%,transparent), to( rgba(255,255,255,.3))   );   opacity:1; } /*active当前展现的状态*/     .slider .ctrl .ctrl-i_active:hover,     .slider .ctrl .ctrl-i_active{   background-color:#000; }     .slider .ctrl .ctrl-i_active:hover img{   opacity:0;/*不会出现图片*/ }     /*幻灯片切换的样式*/ .slider .main .main-i{   opacity:0;   position:absolute;   right:50%;   top:0;   -webkit-transition:all .5s;  } /*字切换*/ .slider .main .main-i h2{   margin-right:45px; } .slider .main .main-i h3{   margin-right:-45px; }     .slider .main .main-i h2, .slider .main .main-i h3{   opacity:0;   -webkit-transition:all 1s .8s;  }      #main_backgroung, .slider .main .main-i_active {   opacity:1;   right:0;   z-index:2; } #main_backgroung{   z-index:1; } .slider .main .main-i h2, .slider .main .main-i h3{   margin-right:0;   opacity:1; }     /*调整字的位置*/ .slider .main .main-i .caption{   margin-right: 13%; }  </style> </head> <body>   <div class="slider"><!--所有的内容-->       <!--0.修改VIEW->Template(关键字替换),增加template 的id -->       <div class="main" id="template_main">      <div class="main-i" id="main_{{index}}">     <div class="caption">    <h2>{{h2}}</h2><h3>{{h3}}</h3> </div> <img src="image/{{index}}.jpg" class="picture"/>  </div>   </div>   <div class="ctrl" id="template_ctrl">      <a class="ctrl-i" id="ctrl_{{index}}" href="javascript:switchSlider({{index}});">     <img src="image/{{index}}.jpg"/>  </a>   </div>   <script type="text/javascript">     //1、数据定义(应该由后台给出)     var data = [   {img:1,h1:'Creative',h2:'DUET'},   {img:2,h1:'friendly',h2:'DEVIL'},   {img:3,h1:'Tranquilent',h2:'COMPATRRIOT'},   {img:4,h1:'Insecure',h2:'HUSSLEP'},   {img:5,h1:'Loving',h2:'REBEL'},   {img:6,h1:'Passionate',h2:'SEEKER'},   {img:7,h1:'Crazy',h2:'FRIEDN'}, ]; //2、定义一个通用函数 var g = function(id){ if (id.substr(0,1) == '.')//获得是类 {                return document.getElementsByClassName(id.substr(1)); }   return document.getElementById(id); }         //3、添加幻灯片 function addSliders(){   //3.1获取模板   //幻灯片模板，去除空白符   var tpl_main = g('template_main').innerHTML                  .replace(/^\s*/,'')  .replace(/\s*$/,'');            //控制按钮模板   var tpl_ctrl = g('template_ctrl').innerHTML                  .replace(/^\s*/,'')  .replace(/\s*$/,'');       //3.2定义最终输出的变量   var out_main = [];   var out_ctrl = [];   //3.3遍历所有的数据，构建最终输出的HTML   for (var i=0; i<data.length; i++)   {   //临时幻灯片变量   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);      }           //3.4把HTML回写到对应得DOM里面   //alert(out_main.length);   g('template_main').innerHTML = out_main.join('');   g('template_ctrl').innerHTML = out_ctrl.join('');     //7、增加#main_backgroung            /*/g('template_main').innerHTML += tpl_main.replace(/{{index}}/g,'{{index}}').replace(/{{h2}}/g,data[i].h1).replace(/{{h3}}/g,data[i].h2);            g('main_{{index}}').id = 'main_backgroung';*/ }         //5、幻灯片切换 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 (var i=0; i<clear_ctrl.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'; }         //6、动态调整图片垂直居中 function movePictures(){   var pictures = g('.picture');   for (var i =0; i<pictures.length ;i++ )   {   pictures[i].style.marginTop = ( -1 *pictures[i].clientHeight/2)+'px'   } } //4、定义何时处理幻灯片输出 window.onload = function(){//当整个window加载完成后添加幻灯片   addSliders();   switchSlider(1);   setTimeout(function(){     movePictures();   },100); }   </script>   </div>   </body></html>
0 0