轮播，缩略图

来源：互联网发布：2016怎么躲过淘宝排查编辑：程序博客网时间：2024/06/06 03:24

实现效果，鼠标移动到下面横线，有缩略图

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);//清除所有的activevar 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>

0 0