我只想问下：源代码在哪里可以下载吗？？
卿清华0828
2015-06-23 22:36
我只想问下：源代码在哪里可以下载吗？？
2回答
-
- 夕颜egao
- 2016-04-25 17:09:17
这代码绝对有错！
-
- 醒悟wjn
- 2015-07-28 11:03:43
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Preview Slideshow</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
padding: 50px 0;
background-color:#fff;
font-size:14px;
font-family: 'Avenir Next';
color:#555;
-webkit-font-smooth:antialiased;
}
.slider .main, .slider .main .main-i, .slider {
width: 100%;
height: 400px;
position: relative;
}
/*幻灯片区域的样式*/
.slider .main{
overflow: hidden;
}
/*每个幻灯片的样式*/
.slider .main .main-i{}
.slider .main .main-i img{
width: 100%;
position: absolute;
left: 0;
top: 50%;
z-index: 1;
}
.slider .main .main-i .caption{
position: absolute;
right: 50%;
top: 30%;
z-index: 9;
}
.slider .main .main-i .caption h2{
line-height: 50px;
font-size: 40px;
text-align: center;
color: b5b5b5;
}
.slider .main .main-i .caption h3{
line-height: 50px;
font-size: 70px;
text-align: center;
color: #000;
font-family: 'Open Sans Condensed';
}
/*控制按键区域的样式*/
.slider .ctrl{
width: 100%;
height: 13px;
line-height: 13px;
text-align: center;
position: absolute;
left: 0;
bottom: -13px;
}
.slider .ctrl .ctrl-i{
display: inline-block;
width: 100px;
height: 13px;
background-color: #666;
box-shadow: 0 1px 1px rgba(0,0,0,.3);
position: relative;
margin-left: 1px;
}
.slider .ctrl .ctrl-i img{
width: 100%;
position: absolute;
left: 0;
bottom: 50px;
z-index: 1;
opacity: 0;
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,.3))
);
opacity: 1;
}
/*控制按钮 avtive 状态*/
.slider .ctrl .ctrl-i_active:hover,
.slider .ctrl .ctrl-i_active{
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_right{
right: -50%;
}
.slider .main .main-i h2{
margin-right:60px;
}
.slider .main .main-i h3{
margin-right: -45px;
}
.slider .main .main-i h2,
.slider .main .main-i h3{
opacity: 0;
transition:all 1s .8s;
}
#main_background,
.slider .main .main-i_active{
right: 0;
opacity: 1;
}
#main_background{
z-index: 1;
}
.slider .main .main-i_active h2,
.slider .main .main-i_active h3{
margin-right: 0px;
opacity: 1;
}
.slider .main .main-i .caption{
margin-right: 15%;
}
</style>
</head>
<body>
<div>
<!-- 0. W修改VIEW->Template(关键字替换) 增加template id -->
<div id="template_main">
<div class="main-i {{class}}" id="main_{{index}}">
<div>
<h2>{{h2}}</h2>
<h3>{{h3}}</h3>
</div>
<img src="images/{{index}}.jpg" alt="">
</div>
</div>
<div id="template_ctrl">
<a href="
javascript:switchSlidder({{index}});" id="ctrl_{{index}}"><img src="images/{{index}}.jpg" alt=""></a>
</div>
</div>
<script type="text/javascript">
//1.数据定义
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.定义一个通用函数
function g (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遍历所有数据
for (i=0;i<data.length;i++){
var _html_main=tpl_main.replace(/{{index}}/g,data[i].img)
.replace(/{{h2}}/g,data[i].h2)
.replace(/{{h3}}/g,data[i].h3)
.replace(/{{class}}/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);
//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';
}
}
function switchSlidder(n) {
var main=g('main_'+n);
var ctrl=g('ctrl_'+n);
//获取所有的幻灯片、所有的控制按钮
var clear_main=g('.main-i_active');
var clear_ctrl=g('.ctrl-i_active');
//清除他们的active样式
for(i=0; i<clear_main.length; i++){
clear_ctrl[i].className=clear_ctrl[i].className.replace(' ctrl-i_active','');
clear_main[i].className=clear_main[i].className.replace(' main-i_active','');
}
//为当前的幻灯片加样式
main.className += ' main-i_active';
ctrl.className += ' ctrl-i_active';
//切换时复制上一张幻灯片到main_backgroud中
setTimeout(function () {
g('main_background').innerHTML=main.innerHTML;
},1000);
}
//动态的调整图片的margin-top以使其垂直居中
function movePicture() {
var pictures=g('.picture');
for(var i=0;i<pictures.length;i++){
pictures[i].style.marginTop=(-1*pictures[i].clientHeight)/2+'px';
}
}
window.onload=function () {
addSliders();
switchSlidder(4);
setTimeout(function(){
movePicture();
},100);
}
</script>
</body>
</html>
JS+CSS3实现带预览图幻灯片效果
53759 学习 · 265 问题
相似问题