效果图:
原理:
这里和实现轮播图(一)的原理差不多 只不过 多了一些特效
代码:
<!DOCTYPE html>
<html lang="en">
<!--先布局出来 -->
<!--整体一个div 里面 两个div 一个是主体-->
<!--一个是控制栏-->
<!--主体里面有多个子div 子div包括 img 和标题-->
<!--控制栏里面也有对应的子div 包括 img-->
<!--然后就是模拟 变换的效果-->
<!--给变换的多一个class 样式 就可以实现效果-->
<!---->
<!--data: -->
<!--1 先把数据都写到布局-->
<!--1.1 先提取模版 然后 for循环 用正则替换写布局-->
<!--1.2 写选择函数 选中的 给一个样式。-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
padding: 50px;
background-color: #FFF;
font-size: 14px;
color: #555;
-webkit-font-smoothing: antialiased; //字体抗锯齿
}
.slider,.main,.main_i{
width: 100%;
height: 400px;
position: relative;
z-index: 2;
}
/*//幻灯片*/
.main{
overflow: hidden;
}
/*幻灯片切换样式*/
.main_i{
opacity: 0;
position: absolute;
right: 50%;
top:0;
-webkit-transition:all .8s;
}
.margin_i_right{
right: -50%;
}
#main_background,
.main_i_active{
opacity: 1;
right: 0;
z-index: 2;
}
#main_background{
z-index: 1;
}
.main_i img{
width: 100%;
position: absolute;
left: 0;
top: 50%;
}
.main_i .caption{
position: absolute;
left: 10%;
top: 20%;
z-index: 999;
}
.main_i .caption h2{
font-size: 60px;
line-height: 50px;
color: #B5B5B5;
text-align: right;
margin-right: -45px;
}
.main_i .caption h3{
font-size: 70px;
line-height: 70px;
color: #000000;
text-align: right;
margin-right:45px ;
}
.main_i .caption h2,
.main_i .caption h3{
opacity: 0;
-webkit-transition: all 1s .8s ;
}
/*控制按钮区域*/
.ctrl{
width: 100%;
height: 13px;
line-height: 13px;
text-align: center;
position: absolute;
left: 0;
background-color: #FFF;
bottom: -13px;
}
.ctrl_i{
display: inline-block;
width: 150px;
height: 13px;
margin-left: 1px;
background-color: #666;
box-shadow: 0 3px 1px rgba(0,0,0,.3);
position: relative;
}
.ctrl_i img{
z-index: 988;
width: 100%;
position: absolute;
left: 0;
bottom: 50px;
opacity: 0;
-webkit-transition: all .5s ;
}
/*hover 控制按钮样式*/
.ctrl_i:hover{
background-color: #F0F0F0;
}
.ctrl_i:hover img{
bottom: 13px;
opacity: 1;
}
/*active 当前展现的状态*/
.ctrl_i_active,.ctrl_i_active:hover{
background-color:#000 ;
}
.ctrl_i_active:hover img{
opacity: 0;
}
.main_i_active .caption h2,
.main_i_active .caption h3{
margin-right: 0px;
opacity: 1;
}
</style>
</head>
<body>
<div class="slider">
<!--修改view 转换成模版 关键词替换 增加 template id-->
<div class="main" id="template_main">
<div class="main_i {{css}}" id="main_{{index}}">
<div class="caption">
<h2>{{h2}}</h2>
<h3>{{h3}}</h3>
</div>
<img src="images/{{index}}.jpg" class="pictures" alt="">
</div>
</div>
<div class="ctrl" id="template_ctrl">
<a href="javascript:switchSlider({{index}});" onfocus="this.blur();" class="ctrl_i" id="ctrl_{{index}}"><img src="images/{{index}}.jpg" alt=""></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'},
]
//2. 通用函数 获取元素节点 可以根据classname 获取节点数组(多传一个.作为标志判断 用的时候再去掉) 也可以 通过id 获取 节点
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].h2)
.replace(/{{h3}}/g,data[i].h3)
.replace(/{{css}}/g,["","margin_i_right"][i%2]);
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('');
// 增加 main_background
g("template_main").innerHTML+=tpl_main
.replace(/{{index}}/g,'{{index}}')
.replace(/{{h2}}/g,data[i].h2)
.replace(/{{h3}}/g,data[i].h3);
g("main_{{index}}").id="main_background";
}
// 5.幻灯片切换
function switchSlider(n){
//5.1获得要展现的幻灯片&控制按钮
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 in
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";
count=n;
//切换完成后 把 背景图改成这张图
setTimeout(function(){ g('main_background').innerHTML=main.innerHTML;},500);
}
// 6 动态调整图片的 margin-top 使其居中
function movePictures(){
var pictures= g('.pictures');
for(var i=0;i<pictures.length;i++){
pictures[i].style.marginTop=pictures[i].clientHeight/2*(-1)+"px"
}
}
// 7 定时切换功能
var count=1;
var by=0;
function autoChage(){
switchSlider(count);
// count++;
if(count==data.length+1)
count=1;
if(count==7){
by=1;
count--;
}
else if(count==1){
count++;
by=0;
}
else{
if(by==0){
count++
}else {
count--
}
}
}
// 4 定义何时处理幻灯片输出
window.onload=function(){
addSliders();
setInterval(autoChage,3000);
switchSlider(1);
//延时执行 不然可能找不到 元素
setTimeout(movePictures,100);
}
</script>
</body>
</html>