( ＿ ＿)ノ｜求幫忙看下錯(cuò)在哪里了。。活生生看了一晚上眼殘看不出啊
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>sliderShow</title>
? ?<link href="CSS/main.css" rel="stylesheet">
? ?<!--script src="JS/control.js"></script-->
</head>
<body>
? ?<div class="slider">
? ? ? ?<!--0.修改VIEW->Template(關(guān)鍵字替換)，增加template id-->
<div class="main" ?id="template_main">
? ? ? ? ? ?<div class="main-i" id="main_{{index}}">
? ? ? ? ? ? ? ?<div class="caption">
? ? ? ? ? ? ? ? ? ?<h2>{{h2}}</h2>
? ? ? ? ? ? ? ? ? ?<h3>{{h3}}</h3>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?<img src="imgs/{{index}}.jpg"/>
? ? ? ? ? ?</div>
? ? ? ?</div>
? ?</div>
? ?<div class="ctrl" id="template_ctrl">
? ? ? ?<a class="ctrl-i" id="ctrl_{{index}}" href="
? ? ? ?javascript:switchSlider({{index}});"><img src="imgs/{{index}}.jpg"/></a>
? ?</div>
? ?<script type="text/javascript">
? ? ? ?//1.數(shù)據(jù)定義（實(shí)際生產(chǎn)環(huán)境中應(yīng)由后臺(tái)給出）
var data = [
? ? ? ? ? ?{img:1,h1:'Creative',h2:'DUET'},
? ? ? ? ? ?{img:2,h1:'Friendly',h2:'DEVIL'},
? ? ? ? ? ?{img:3,h1:'Tranquilent',h2:'COMPATRIOT'},
? ? ? ? ? ?{img:4,h1:'Insecure',h2:'HUSSLER'},
? ? ? ? ? ?{img:5,h1:'Loving',h2:'REBEL'},
? ? ? ? ? ?{img:6,h1:'Crazy',h2:'FRIEND'}
? ? ? ?];
? ? ? ?//2.定義通用函數(shù)
var g = function(id){
? ? ? ? ? ?if(id.substr(0,1) == '.'){ //通過classname獲取
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*$/,''); ? ?//去除前面和后面的空白符
? ? ? ? ? ?//3.2定義最終輸出 HTML的變量
var tpl_ctrl = g('template_ctrl').innerHTML
.replace(/^\s*/,'')
? ? ? ? ? ? ? ? ? ?.replace(/\s*$/,'');
? ? ? ? ? ?//3.2定義最終輸出html的變量
var out_main = [];
? ? ? ? ? ?var out_ctrl = [];
? ? ? ? ? ?//3.3遍歷所有數(shù)據(jù)，構(gòu)建最終輸出的html
for( i in data) {
? ? ? ? ? ? ? ?var _html_main = tpl_main
.replace(/{{index}}/g,data[i].img) ? ?//正則表達(dá)跟g表示全局替換
.replace(/{{h2}}/g,data[i].h1)
? ? ? ? ? ? ? ? ? ? ? ?.replace(/{{h3}}/g,data[i].h2);
? ? ? ? ? ? ? ?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('');
? ? ? ?}
? ? ? ?//5.幻燈片切換
function switchSlider(n){
? ? ? ? ? ?//5.1獲得要展現(xiàn)的幻燈片和控制按鈕
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清除獲取到的內(nèi)容的active樣式
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為當(dāng)前的控制按鈕和幻燈片附加樣式
main.className += ' main-i_active';
? ? ? ? ? ?ctrl.className += ' ctrl-i_active';
? ? ? ?}
? ? ? ?//6.定義合適處理幻燈片輸出
window.onload = function(){
? ? ? ? ? ?addSliders();
? ? ? ? ? ?switchSlider(2)
? ? ? ?}
? ?</script>
</body>
</html>
2017-09-07
你這段代碼放錯(cuò)位置了
“??<div class="ctrl" id="template_ctrl">
? ? ? ?<a class="ctrl-i" id="ctrl_{{index}}" href="
? ? ? ?javascript:switchSlider({{index}});"><img src="imgs/{{index}}.jpg"/></a>
? ?</div>”
應(yīng)該放在<div class="slider"></div>里面，和<div class="main">同級(jí)
2015-12-21
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>幻燈片</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-smoothing:antialiased;/*字體抗鋸齒*/
}
.slider .main .main-i,
.slider .main,
.slider{
width:100%;
height:400px;
position:relative;/*相對定位*/
}
/*幻燈片區(qū)域*/
.slider .main{
overflow: hidden;
}
/*每一個(gè)幻燈片的樣式*/
.slider .main .main-i{}
.slider .main .main-i img{
width:100%;
position: absolute;
left:0;
top:0;
z-index: 1;
}
.slider .main .main-i .caption{
position:absolute;
right:50%;
top:30%;
z-index: 9 ;
}
.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: 70px;
line-height: 70px;
color: #000000;
text-align:right;
font-family: 'Open Sans Condensed';
}
/*控制按鈕區(qū)域*/
.slider .ctrl{
width:100%;
height:13px;
line-height: 13px;
text-align: center;
position: absolute;
left: 0;
bottom:-13px;
position: relative;
}
.slider .ctrl .ctrl-i{
display: inline-block;
width:150px;
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;
-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,.3) )
);
opacity: 1;
}
/*active 當(dāng)前展現(xiàn)狀態(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;
-webkit-transition: all .5s;
}
.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{
-webkit-transition: all .8s 1s;
}
.slider .main .main-i_active{
right:0;
opacity: 1;
}
.slider .main .main-i_active h2,
.slider .main .main-i_active h3{
margin-right: 0;
}
</style>
</head>
<body>
<div>
<div id="template_main">
<div class="main-i main-i_active" id="main_{{index}}">
<div>
<h2>{{h2}}</h2>
<h3>{{h3}}</h3>
</div>
<img src="images/{{index}}.jpg" />
</div>
</div>
<div id="template_ctrl">
<a href="javascript:switchSlider({{index}});" id="ctrl_{{index}}">
<img src="images/{{index}}.jpg">
</a>
</div>
</div>
2015-12-09
你應(yīng)該打開Chrome到控制臺(tái)（F12），看下錯(cuò)誤信息提示。
而且，這么一堆代碼放上來，也不知道你想實(shí)現(xiàn)什么樣的效果，引入的外部文件代碼會(huì)不會(huì)影響，別人都很難知道