<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>幻灯片效果</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
padding: 50px 10%;
}
.slider .main,.slider{
100%;
height: 400px;
position: relative;
}
/*幻灯片*/
.slider .main{
overflow: hidden;
}
.slider .main .main_i{
100%;
position: absolute;
right: 50%;
top:0px;
-webkit-transition:all 0.5s;
opacity: 0;
}
.slider .main .main_i img{
100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
/*控制*/
.slider .ctrl {
100%;
height: 13px;
line-height: 13px;
text-align: center;
position: absolute;
left: 0;
bottom: -13px;
background: #ccc;
}
.slider .ctrl .ctrl_i{
display: inline-block;
150px;
height: 13px;
background: #ccc;
border: 1px solid;
position: relative;
margin-left: 1px;
}
.slider .ctrl .ctrl_i img{
100%;
position: absolute;
left: 0;
bottom:50px ;
z-index: 1;
opacity: 0;
-webkit-transition:all 0.2s ;
}
/*hover 控制按钮样式*/
.slider .ctrl .ctrl_i:hover{
background-color:#f0f0f0 ;
}
.slider .ctrl .ctrl_i:hover img{
bottom:13px ;
/*倒影*/
-webkit-box-reflect:below 0px -webkit-gradient(
linear,
0 0,
0 100%,
from(transparent),
color-stop(50%,transparent),
to(rgba(255, 255, 255, 0.3))
);
opacity: 1;
}
/*active 当前状态*/
.slider .ctrl .ctrl_i_active img:hover,
.slider .ctrl .ctrl_i_active{
background-color: #ccc;
}
.slider .ctrl .ctrl_i_active:hover img{
opacity: 0;
}
.slider .main .main_i_active{
right: 0;
opacity:1;
}
</style>
</head>
<body>
<div class="slider">
<div class="main" id="template_main">
<div class="main_i" id="main_{{index}}">
<img src="images/{{index}}.jpg" alt=""/>
</div>
</div>
<div class="ctrl" id="template_ctrl">
<a class="ctrl_i " id="ctrl_{{index}}" href="javascript:switchSlider({{index}});">
<img src="images/{{index}}.jpg" alt=""/>
</a>
</div>
</div>
</body>
<script>
//1. 数据定义
var data = [
{img:1},
{img:2},
{img:3},
{img:4},
{img:5}
]
//定义通用函数
var g = function(id){
if(id.substr(0,1) == "."){
return document.getElementsByClassName(id.substr(1))
}
return document.getElementById(id);
}
//添加幻灯片
function addslider(){
var tpl_main = g('template_main').innerHTML;
var tpl_ctrl = g('template_ctrl').innerHTML;
var out_main = [];
var out_ctrl = [];
for(i in data){
var _html_main = tpl_main
.replace(/{{index}}/g,data[i].img)
.replace(/{{index}}/g,data[i].img)
var _html_ctrl = tpl_ctrl
.replace(/{{index}}/g,data[i].img);
out_main.push(_html_main);
out_ctrl.push(_html_ctrl);
}
//把html 写到对应的dom 中
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);
// 获得所有的幻灯片&控制按钮 dom
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(){
addslider();
switchSlider(1)
}
</script>
</html>