HTML 幻灯片预览效果

本案列来源于慕课网。

鼠标放在灰色条上，可以提前在上方预览到图片；当点击灰色条时，实现幻灯片的切换。

演示图片如下：

演示网页为：http://119.29.253.206/ppt/index.html

具体代码如下：

HTML：



	
	
	


	

		

			

				

					
{{h2}}
					
{{h3}}
				
				
			
		
		

			
				
			
		
	
	


CSS：
       *{
            margin: 0;
            padding: 0;
        }
        body{
            padding: 50px 0;
            font-size: 14px;
            color: #555;
        }
        .spider,.spider .main,.spider .main .main-i{
            width: 100%;
            height: 400px;
            position: relative;
        }
        .spider .main{
            overflow: hidden;
        }
        .spider .main .main-i img{
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
        }
        .spider .main .main-i .caption{
            position: absolute;
            right: 50%;
            top: 30%;
            z-index: 9;
        }
        .spider .main .main-i .caption h2{
            font-size: 40px;
            line-height: 50px;
            color: #B5B5B5;
            text-align: right;
        }
        .spider .main .main-i .caption h3{
            font-size: 70px;
            line-height: 70px;
            color: #000000;
            text-align: right;
        }
        .spider .main .main-i{
            opacity: 0;
            position: absolute;
            right: 50%;
            top: 0;
            transition: all 0.5s;
        }
        .spider .main .main-i h2{
            margin-right: 45px;
        }
        .spider .main .main-i h3{
            margin-right: -45px;
        }

        .spider .main .main-i h2,
        .spider .main .main-i h3{
            transition: all 0.8s 0.5s;
        }
        .spider .main .main-i_active{
            right: 0;
            opacity: 1;
        }
        .spider .main .main-i_active h2,
        .spider .main .main-i_active h3{
            margin-right: 0;
        }
        .spider .ctrl{
            width: 100%;
            height: 13px;
            line-height: 13px;
            text-align: center;
            position: absolute;
            left: 0;
            bottom: -13px;
        }
        .spider .ctrl .ctrl-i{
            display: inline-block;
            width: 150px;
            height: 13px;
            background-color: #666;
            box-shadow: 0 1px 1px rgba(0,0,0,0.3);
            position: relative;
            margin: 1px;
        }
        .spider .ctrl .ctrl-i img{
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 50px;
            z-index: 1;
            opacity: 0;
            -webkit-transition: all 0.2s;
        }
        .spider .ctrl .ctrl-i:hover{
            background-color: #F0F0F0;
        }
        .spider .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,0.3))
              );
            opacity: 1;
        }
        .spider .ctrl .ctrl-i_active,.spider .ctrl .ctrl-i_active :hover{
            background-color: #000;
        }
        .spider .ctrl .ctrl-i_active:hover img{
            opacity: 0;
        }
   }
   .spider .ctrl{
       width: 100%;
       height: 13px;
       line-height: 13px;
       text-align: center;
       position: absolute;
       left: 0;
       bottom: -13px;
   }
   .spider .ctrl .ctrl-i{
       display: inline-block;
       width: 150px;
       height: 13px;
       background-color: #666;
       box-shadow: 0 1px 1px rgba(0,0,0,0.3);
       position: relative;
       margin: 1px;
   }
   .spider .ctrl .ctrl-i img{
       width: 100%;
       position: absolute;
       left: 0;
       bottom: 50px;
       z-index: 1;
       opacity: 0;
       transition: all 0.2s;
   }
   .spider .ctrl .ctrl-i:hover{
       background-color: #F0F0F0;
   }
   .spider .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,0.3))
          );
       opacity: 1;
   }
   .spider .ctrl .ctrl-i_active,.spider .ctrl .ctrl-i_active :hover{
       background-color: #000;
   }
   .spider .ctrl .ctrl-i_active:hover img{
       opacity: 0;
   }
js:
var data=[{img:1,h1:"1contenxth1",h2:"1contenxth2"},
          {img:2,h1:"2contenxth1",h2:"2contenxth2"},
          {img:3,h1:"3contenxth1",h2:"3contenxth2"},
          {img:4,h1:"4contenxth1",h2:"4contenxth2"},
          {img:5,h1:"5contenxth1",h2:"5contenxth2"},
          {img:6,h1:"6contenxth1",h2:"6contenxth2"},
          {img:7,h1:"7contenxth1",h2:"7contenxth2"}];
var g=function(id){
	if(id.substr(0,1)=="."){
		return document.getElementsByClassName(id.substr(1));
	}
	return document.getElementById(id);
}

function addSpiders(){
    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(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(var i=0;i