我只想問下：源代碼在哪里可以下載嗎？？
我只想問下：源代碼在哪里可以下載嗎？？
卿清華0828
2015-06-23
2 回答
舉報
0/150
提交
取消
2016-04-25
這代碼絕對有錯！
2015-07-28
<!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;
?? ??? ?}
?? ??? ?/*幻燈片區(qū)域的樣式*/
?? ??? ?.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';
?? ??? ?}
?? ??? ?/*控制按鍵區(qū)域的樣式*/
?? ??? ?.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 狀態(tài)*/
?? ??? ?.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(關(guān)鍵字替換)? 增加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.數(shù)據(jù)定義
?? ??? ?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.定義一個通用函數(shù)
?? ?function g (id) {
?? ??? ?if (id.substr(0,1)=='.') {
?? ??? ??? ?return document.getElementsByClassName(id.substr(1));
?? ??? ?}
?? ??? ?return document.getElementById(id);
?? ?}
?? ?//3添加幻燈片的操作（所有幻燈片和對應(yīng)的按鈕）
?? ?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遍歷所有數(shù)據(jù)
?? ??? ?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回寫到對應(yīng)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);
?? ?}
?? ?//動態(tài)的調(diào)整圖片的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>