第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定

求問 那里出錯了?

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>旋轉(zhuǎn)木馬</title>

<script type="text/javascript" src="jquery-1.11.3.min.js"></script>

<script type="text/javascript" src="xuanzhuan.js"></script>

<style>

*{

margin:0;padding:0;

}

body{

padding: 50px 0;

background-color: #fff;

}

.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;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:#000;

text-align: right:;

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: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;

}

.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;

}

.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{

opacity: 1;

right:0;

}

.slider .main .main-i_active h2,

.slider .main .main-i_active h3{

margin-right: 0px;


}


</style>

</head>

<body>

<div>

<div id="template_main">

<div id="main_{{index}}">

? ?<div>

? ? <h2>{{h2}}</h2>

? ? <h3>{{h3}}</h3>

? ?</div>

? ?<img src="img/{{index}}.jpg">

? ?</div>

??

</div>

<div id="template_ctrl">

<a id="ctrl_{{index}}" href="javascripy:switchSlider({{index}});">

<img src="img/{{index}}.jpg">

</a>


</div>

</div>

? ?


<script type="text/javascript">

//1. 數(shù)據(jù)定義(實際由后臺給到)

? ? ? var data=[

? ? ? ? ?{img:1,h1:'erew',h2:'fdsdsf'},

? ? ? ? ?{img:2,h1:'sdfsd',h2:'dsfdsg'},

? ? ? ? ?{img:3,h1:'dfsf',h2:'vxc'},

? ? ? ? ?{img:4,h1:'zvdf',h2:'fg'},

? ? ? ? ?{img:5,h1:'fgfu',h2:'jhgkjh'}

? ? ? ];

? ? //2. 通用函數(shù)

? ? ? var g=function(id){

? ? ? ?if( id.substr(0,1)=='.'){

? ? ? ?return document.getElementsByClassName(id.substr(1));

? ? ? ?}

? ? ? ?return document.getElementById(id);

? ? ? }

? ? ? // 3.添加幻燈片的操作及對應(yīng)的按鈕

? ? ? function addSliders(){

? ? ? ?var tpl_main=g('template_main').innerHTML.replace(/^\s*/,'').replace(/\s*$/,'');

? ? ? ?var tpl_ctrl=g('template_ctrl').innerHTML.replace(/^\s*/,'').replace(/\s*$/,'');

? ? // 定義輸出的html 的變量

? ? var out_main=[];

? ? var out_ctrl=[];

? ? //遍歷所有數(shù)據(jù),構(gòu)建最終輸出的 html;

? ? for(i in data){

? ? ?var _html_main=tpl_main.replace(/{{index}}/g,data[i].img).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);

? ? ? ? ? }

? ? ? ? ? //把html回寫進(jìn)對應(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)的幻燈片&控制按鈕 DOM

? ? ? ?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 清除她們的active 樣式

? ? ? ? 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','');

? ? ? ? };

? ? ? ? //5.4 為當(dāng)前控制按鈕和幻燈片附加樣式

? ? ? ?main.className +=' main-i_active';

? ? ? ?ctrl.className +=' ctrl-i_active';

? ? ? }






? ? ?window.onload=function(){

? ? ? addSliders();

? ? ? switchSlider(2);

? ? ?}

?


</script>

</body>

</html>


正在回答

1 回答

還是得靠自己啊 單詞寫錯的后果很嚴(yán)重

0 回復(fù) 有任何疑惑可以回復(fù)我~

舉報

0/150
提交
取消

求問 那里出錯了?

我要回答 關(guān)注問題
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號