源代码从哪里下载
课程很好啊
南城浅霜
2015-12-10
7 回答
html
<html>
<head>
<title>img slider</title>
<meta charset="utf8"/>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="slider">
<div class="main" id="template_main">
<div class="main-i {{css}}" id="main_{{index}}">
<img src="img/{{index}}.jpg"/ class="picture">
<div class="caption">
<h2>{{h2}}</h2>
<h3>{{h3}}</h3>
</div>
</div>
</div>
<div class="ctrl" id="template_ctrl">
<a class="ctrl-i" href="javascript:switchSlider({{index}});" id="ctrl_{{index}}">
<img src="img/{{index}}.jpg"/>
</a>
</div>
</div>
<script src="script.js"></script>
</body>
</html>css
*{
padding:0px;
margin:0px;
}
body{
padding:50px 0px;
background-color: #fff;
font-family:"Avenir Next";
font-size:14px;
color:#555;
-webkit-font-smoothing:antialiased;
}
.slider .main .main-i,
.slider .main,
.slider{
width:100%;
height:400px;
position:relative;
}
/*幻灯片区域的样式*/
.slider .main{
overflow: hidden;
}
.slider .main .main-i{}
.slider .main .main-i img{
width:100%;
position:absolute;
top:50%;
left:0px;
}
.slider .main .main-i .caption{
position:absolute;
right:60%;
top:30%;
}
.slider .main .main-i .caption h2{
font-size: 40px;
line-height: 50px;
color: #b5b5b5;
text-align: right;
}
.slider .main .main-i .caption h3{
font-size: 55px;
line-height: 60px;
color: #000000;
text-align: right;
font-family: 'Andale Mono Regular';
}
/*控制按钮区域的样式*/
.slider .ctrl{
width:100%;
height:13px;
position:absolute;
bottom:-13px;
left:0px;
text-align:center;
line-height: 13px;
}
.slider .ctrl .ctrl-i{
position:relative;
display: inline-block;
width:150px;
height:13px;
background-color: #666;
box-shadow:0 1px 1px rgba(0,0,0,0.3);
margin-left:1px;
}
.slider .ctrl .ctrl-i img{
width:100%;
position:absolute;
bottom:50px;
left:0px;
opacity: 0;
z-index: -1;
-webkit-transition:all .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,
left top,
left bottom,
from(transparent),
color-stop(50%,transparent),
to( rgba(255,255,255,0.3) )
);
opacity: 1;
z-index: 0;
}
/*active 当前展示的状态*/
.slider .ctrl .ctrl-i-active:hover,
.slider .ctrl .ctrl-i-active{
background-color: #000;
}
.slider .ctrl .ctrl-i-active:hover img{
z-index:-1;
opacity: 0;
}
/*幻灯片切换*/
.slider .main .main-i-right,
.slider .main .main-i{
position:absolute;
left:-50%;
top:0;
opacity: 0;
-webkit-transition:all .5s;
}
.slider .main .main-i-right{
left:50%;
}
.slider .main .main-i h2{
margin-right:45px;
}
.slider .main .main-i h3{
margin-right:-45px;
}
.slider .main .main-i h2,
.slider .main .main-i h3{
opacity: 0;
-webkit-transition:all 1s .5s;
}
#main_background,
.slider .main .main-i-active{
left:0%;
opacity: 1;
}
#main_background{
z-index:-1;
}
.slider .main .main-i-active .caption{
margin-right: 5%;
}
.slider .main .main-i-active h2,
.slider .main .main-i-active h3{
opacity: 1;
margin-right: 0px;
}javascript
var data=[
{img:'1',h2:'Creative',h3:'DUET'},
{img:'2',h2:'Friendly',h3:'DEVIL'},
{img:'3',h2:'Tranqilent',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 addSliders(){
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].h2).replace(/{{h3}}/g,data[i].h3).replace(/{{css}}/g,['','main-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)
}
g("template_main").innerHTML=out_main.join('')
g("template_ctrl").innerHTML=out_ctrl.join('')
g("template_main").innerHTML+=tpl_main.replace(/{{h2}}/g,data[i].h2).replace(/{{h3}}/g,data[i].h3)
g("main_{{index}}").id='main_background'
}
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_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','')
}
main.className+=' main-i-active'
ctrl.className+=' ctrl-i-active'
setTimeout(function(){
background=g('main_background')
background.innerHTML=main.innerHTML
},1000)
}
function movePicture(){
var picture=g('.picture')
for (var i=0 ;i<picture.length;i++){
picture[i].style.marginTop=(-1* picture[i].clientHeight/2)+'px'
}
}
window.onload=function(){
addSliders()
switchSlider(1)
setTimeout(movePicture,100)
}
举报
0/150
提交
取消
