实现效果,鼠标移动到下面横线,有缩略图
1、布局
先设置幻灯片图,有图片和标题部分,图片超出部分使用overflow:hidden;
再设置导航栏部分,使用text-alight:center;使得其居中,缩略图设置有倒影,缩略图设置大小,使用opcation设置显示与不显示
设置二者的激活状态
2、使用模板插入幻灯片和导航部分
repace(re,'')替换{{index}}与{{h2}}、{{h3}},将组装的数据都放入数组out_main和数组out_ctrl中,然后out_main.join('')和out_ctrl.join('')插入到文档中
3、切换幻灯片
去掉和添加ctrl-i_active和main-i_active
4、去掉切换时产生的空白
多定义一个main_background,它和main-i_active一样,保留当前的main-i_active,切换时,相当于作为背景,这样就不会出现空白了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播</title>
<style>
*{margin:0;padding:0;}
body{
<span style="white-space:pre"> width:1350px;</span>
<span style="white-space:pre"> </span>padding: 50px 0;
background-color:#fff;
font-size:14px;
font-family:'Avenir Next';
color:#555;
-webkit-font-smoothing:antialiased;/*字体抗齿型*/
}
.slider,.slider .main,.slider .main .main-i,.slider .main .main-i img{
width:100%;
height:400px;
position:relative;
}
/* 幻灯片区域 */
.slider .main{
overflow:hidden;
}
/* 每一个幻灯片 */
.slider .main .main-i{
}
.slider .main .main-i img{
position: absolute;
top:50%;
left:0;
z-index:1;
transition: all .8s;
}
.slider .main .main-i .caption{
position: absolute;
top:30%;
left: 13%;
z-index:9;
}
.slider .main .main-i .caption h2{
font-size:40px;
color:#b5b5b5;
line-height:50px;
text-align:right;
}
.slider .main .main-i .caption h3{
font-size:60px;
color:#000;
line-height:60px;
font-family:'Open Sans Condensed';
text-align:right;
}
/* 控制区域 */
.slider .ctrl{
width: 100%;
height:13px;
line-height:13px;
text-align:center;
top:0;
bottom:-13px;
}
.slider .ctrl .ctrl-i{
width:150px;
height:13px;
display:inline-block;
background-color:#666;
box-shadow:0 1px 1px rgba(0,0,0,.3);
position: relative;
margin-right:1px;
}
.slider .ctrl .ctrl-i img{
width:100%;
position: absolute;
left:0;
bottom:50px;
z-index:2;
-webkit-transition:all .2s;
opacity: 0
}
.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;
}
/* 控制按钮切换 */
.slider .ctrl .ctrl-i_active, .slider .ctrl .ctrl-i_active:hover{
background-color:#000;
}
.slider .ctrl .ctrl-i_active:hover img{
opacity: 0
}
/* 幻灯片切换 */
.slider .main .main-i{
opacity: 0;
position: absolute;
right: 50%;
top:0;
transition: all .5s;
z-index:2;
}
.slider .main .main-i .caption h2{
margin-right:45px;
}
.slider .main .main-i .caption h3{
margin-right:-45px;
}
.slider .main .main-i .caption h2,.slider .main .main-i .caption h3{
transition: all 1s 0.8s;
}
.slider .main .main-i_active{
position: absolute;
top:0;
right:0;
opacity: 1;
}
#main_background{
z-index:1;
position: absolute;
top:0;
right:0;
opacity: 1;
}
.slider .main .main-i_active .caption h2{
margin-right: 0;
}
.slider .main .main-i_active .caption h3{
margin-right: 0;
}
</style>
</head>
<body>
<div class="slider">
<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="imgs/{{index}}.jpg" alt="img" class="pictrue" />
</div>
</div>
<div class="ctrl" id="template_ctrl">
<a class="ctrl-i" href="javascript:switchSlider({{index}});" id="ctrl_{{index}}">
<img src="imgs/{{index}}.jpg" alt="img" />
</a>
</div>
</div>
<script>
var data = [
{img:1,h2:'Creative',h3:'DUET'},
{img:2,h2:'Friendly',h3:'DEVIL'},
{img:3,h2:'Tranquilent',h3:'COMPATRIOT'},
{img:4,h2:'Insecure',h3:'HUSSLER'},
{img:5,h2:'Loving',h3:'REBEL'},
{img:6,h2:'Passionate',h3:'SEEKER'},
{img:7,h2:'Crazy',h3:'FRIEND'}];
var g = function(id){
if(id.substr(0,1)=="."){
return document.getElementsByClassName(id.substr(1));
}
return document.getElementById(id);
}
//添加幻灯片
function addSilders(){
//获取模板
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(var 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);
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('');
//不出现白底
g('template_main').innerHTML +=tpl_main;
g('main_{{index}}').id ='main_background';
}
//切换幻灯片
function switchSlider(n){
var main = g('main_'+n);
var ctrl = g('ctrl_'+n);
//清除所有的active
var clear_main = g('.main-i');
var clear_ctrl = g('.ctrl-i');
for(var i=0;i<clear_ctrl.length;i++){
clear_ctrl[i].className = clear_ctrl[i].className.replace(/ ctrl-i_active/g,'');
clear_main[i].className = clear_main[i].className.replace(/ main-i_active/g,'');
}
main.className +=' main-i_active';
ctrl.className +=' ctrl-i_active';
//空白
setTimeout(function(){
g('main_background').innerHTML = main.innerHTML;
console.log(g('main_background').innerHTML);
},1000)
}
function movePictrue(){
var pictrues = g('.pictrue');
for(var i=0;i<pictrues.length;i++){
pictrues[i].style.marginTop = (-1*pictrues[i].clientHeight/2)+'px';
}
}
window.onload = function(){
addSilders();
switchSlider(2);
setTimeout(function(){
movePictrue();
},100);
}
</script>
</body>
</html>