全屏滚动制作！！

<style type="text/css">
      *{padding: 0;margin: 0;}
      body{
           padding: 0;
           background-color: #fff;
           font-size: 'Avenir Next';
           color:#555;

      }
       .slider .main .main-i,
       .slider .main
       .slider {
       	 width: 100%;
       	 height:97%;
       	 position:relative;
       }
       /*幻灯片区域*/
       .slider .main{
       	overflow: hidden;
       }

        .slider .main .main-i img{
        	height: 100%;
        	width:100%;
        	position:absolute;
        	left:0;
        	top: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: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:3%;
         	line-height: 13px;
         	text-align: center;
         	position:absolute;
         	left:0;
            bottom:0px;

         	
         	
         } 

         .slider .ctrl .ctrl-i{
         	display:inline-block;
         	width:150px;
         	height:50%;
         	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;
         }
           .slider .ctrl .ctrl-i:hover{
           	background-color: #f0f0f0;

           } 
           .slider .ctrl .ctrl-i:hover img{
           	bottom:13px;
           	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{
            	-webkit-transition:all.8s 1s;
            }
            
            .slider .main .main-i_active{
            	right:0;
            	opacity: 1;
            }
           .slider .main .main-i_active h2,
            .slider .main .main-i_active h3{
            	margin-right: 0;
            }

     </style>

css主要实现controler的动画效果，缩影图片的动态显示。

<pre name="code" class="javascript"><script type="text/javascript">
        //1.数据定义（实际生产环境中，应由后台给出）
        var data=[
          {img:1,h1:'Creative',h2:'DUET'},
          {img:2,h1:'Friendly',h2:'DEVIL'},
          {img:3,h1:'fuck you',h2:'NICE'},
          {img:4,h1:'ANDYOU',h2:'BITCH'},
          {img:5,h1:'Cfdfd',h2:'HAPPNIESS'},
          {img:6,h1:'HOVERT',h2:'jiingdff'},
          {img:7,h1:'SHOUEWLD',h2:'UBHYUOIM'}
        ];

        //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定义最终输出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].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里
              g('template_main').innerHTML = out_main.join('');
              g('template_ctrl').innerHTML = out_ctrl.join('');
      
        }
         //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';
           
         }
           //设置幻灯片循环播放
         function timer(){
         	addSliders();
         	switchSlider(n);
         	setTimeout('timer()',1000);
         }
         
         function timer2(){
         	switchSlider(flagInd);
         	flagInd += 1;
         	if (flagInd == 8) {
         		flagInd = 1;
         	};
         }
        //4.定义何时处理幻灯片输出
        var flagInd = 1;
        window.οnlοad=function(){

         		//timer(); 
         	addSliders(); 
         	setInterval('timer2()', 1000);   	
         } 
       </script>

js代码主要实现幻灯片的轮换输出。

<pre name="code" class="html"><div class="slider">
     <div class="main" id="template_main">
     	<div class="main-i main-i_active" id="main_{{index}}">
     		<div class="caption">
     			<h2>{{h2}}</h2>
     			<h3>{{h3}}</h3>

     		</div>
     	    <img src="{{index}}.jpg"/>
     	</div>
     </div>
       <div class="ctrl" id="template_ctrl">
       <a class="ctrl-i"  id="ctrl_{{index}}" href="javascript:switchSlider({{index}});"><img src="{{index}}.jpg"/></a>
       </div>