个回答

• 不惊无宠

  2015-10-24 09:58:09

  已采纳

  求份代码可以么~？我的代码有问题，调不出来错

  1

• 慕数据2409684

  2015-10-26 08:51:07

   <script type="text/javascript">

    /*1.定义数据*/

    var data = [

    {img:1,h2:'Caption',h3:'COMPATAIOT'},

    {img:2,h2:'Fridently',h3:'Duct'},

    {img:3,h2:'Caption',h3:'REBEL'},

    {img:4,h2:'Loving',h3:'Duct'},

    {img:5,h2:'Crazy',h3:'SEEKER'},

    {img:6,h2:'Caption',h3:'Duct'},

    {img:7,h2:'Shopping',h3:'FRIEND'},

    ];

    /*2g通用函数--获取DOM*/

    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定义最终输出HTML的变量

     var out_main = [];

     var out_ctrl = [];

     //3.3遍历所有的数据，构建最终输出的HTML

     for( i in data){

      var _html_main = tpl_main

        .replace(/{{index}}/g,data[i].img)

        .replace(/{{h2}}/g,data[i].h2)

        .replace(/{{h3}}/g,data[i].h3)

        .replace(/{{css}}/g,['','main-i_right'][i%2]);   //随机的添加main-i_right样式

      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里面

     g('template_main').innerHTML = out_main.join('');

     g('template_ctrl').innerHTML = out_ctrl.join('');

     //7增加#main_background

     g('template_main').innerHTML += tpl_main

        .replace(/{{index}}/g,'{{index}}')

        .replace(/{{h2}}/g,data[i].h2)

        .replace(/{{h3}}/g,data[i].h3);

        g('main_{{index}}').id = 'main_background';

    }

     //5 幻灯片切换

     function switchSlider(n){

      //5.1获取要展现的幻灯片&控制按钮 DOM

      var main = g('main_'+n);

      var ctrl = g('ctrl_'+n);

     

      //5.2获取所有的幻灯片以及控制按钮

      var clear_main = g('.main-i');

      var clear_ctrl = g('.ctrl-i');

      //5.3清楚他们的active样式

      for(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','');

      }

      //5.4为当前的控制按钮和幻灯片添加样式

      main.className += ' main-i_active';

      ctrl.className += ' ctrl-i_active';

      //7.2切换时，复制上一张幻灯片到main_background 中

      setTimeout(function(){

       g('main_background').innerHTML = main.innerHTML;

      },1000)

     }

     //6 动态调整图片的 margin-top 以使其2垂直居中

     function movePictures(){

      var pictures = g('.picture');

      for(i = 0 ; i< pictures.length;i++){

       pictures[i].style.marginTop = (-1*pictures[i].clientHeight/2)+'px';

      }

     }

     

     //4 定义何时处理幻灯片输出

     window.onload = function(){

      addSliders();

      switchSlider(2);

      setTimeout(function(){

       movePictures();

      },100)

     }

   </script>

  
  

  0

• 慕数据2409684

  2015-10-26 08:50:36

    *{ padding:0; margin:0;}

     body{ padding:50px 0; background-color: #fff; font-size: 14px;  font-family: 'Avenir Next' '宋体';

      color:#555;  -webkit-font-smoothing: antialiased;   }  

     /*幻灯片区域*/

     .slider .main{  overflow: hidden; }

     .slider,  .slider .main, .slider .main .main-i{ width:100%; height:400px; position:relative; }

     .slider .main .main-i img{  width:100%; position: absolute； top:70%; left:0; 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: center;   }

     .slider .main .main-i .caption .h3{ font-size:70px; line-height:70px; color:#000; text-align: right;

     font-family: "times new roman"; }  

     /*控制区域*/

     .slider .ctrl{

      width:100%;

      height:13px;

      line-height: 13px;

      text-align: center;

      position: absolute;

      left: 0;

      bottom:-13px;

      background-color: #fff;

     }

     .slider .ctrl .ctrl-i{

      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;

      z-index: 2;

     }

     .slider .ctrl .ctrl-i:hover img{

      bottom:13px;

      -webkit-box-reflect: below 0px -webkit-gradient(

      linear,

      left top,

      right 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;

      z-index: 2;

     }

     .slider .main .main-i_right{

      right:-50%;

     }

     .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_background,

     .slider .main .main-i_active{

      right:0;

      opacity: 1;

      z-index: 2;

     }

     #main_background{

      z-index:1;

     }

     .slider .main .main-i_active h2,

     .slider .main .main-i_active h3{

      margin-right:0px;

      opacity: 1;

     }

     .slider .main .main-i .caption{

      margin-right: 13%;

     }

  
  

  1

• Amble

  2015-09-21 09:27:29

  我加了.后还是没有动态效果

  0

• 慕数据2409684

  2015-08-21 11:06:48

  问题解决了，是因为，h2,h3是类，前边没加.

  1

• 没个性的七秒鱼

  2015-08-19 13:43:55

  你是不是h2有动画效果，h3没有

  0

• 慕数据2409684

  2015-08-18 14:17:59

  和老师的代码一样啊，我不知道为什么了

  0