本案列来源于慕课网。
鼠标放在灰色条上，可以提前在上方预览到图片；当点击灰色条时，实现幻灯片的切换。
演示图片如下：
演示网页为：http://119.29.253.206/ppt/index.html
具体代码如下：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="spider">
<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="images/{{index}}.jpg">
</div>
</div>
<div class="ctrl" id="template_ctrl">
<a href="javascript:switchSlider({{index}});" id="ctrl_{{index}}" class="ctrl-i">
<img src="images/{{index}}.jpg">
</a>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
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<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(){
addSpiders();
switchSlider(1);
}